오에카키 :: 상무

오에카키

Web/Js 2017. 9. 27. 17:56

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>오에카키</title>

    <style>

        body {

            margin : 20px;

}

        canvas {

            cursor : crosshair;

            border: solid 2px #000;

            margin : 15px 0 0 0;

            -webkit-box : 1px 1px 20px #ccc;

            -moz-box : 1px 1px 20px #ccc;

            box-shadow: 1px 1px 20px #ccc;

}

        input {

            border : 1px solid #000;

}

    </style>

    <script>

        var canvas; // 캔버스 정보 변수

        var ctx;    // 캔버스 컨텍스트 정보 변수

        var flag = false; // 마우스가 눌린 상태인지 보기위함

        // 페이지가 로드되면 그림 준비

        var ready = function() {

            canvas = document.getElementById("canvas"); // 캔버스 정보 불러오기

            ctx = canvas.getContext("2d"); // 컨텍스트 정보 불러오기

            canvas.onmousedown = drawStart; // 마우스가 눌리면 작동

            canvas.onmousemove = drawing;

            canvas.onmouseup = drawEnd;

}

        // 펜 설정

        var w1 = function() {

            ctx.lineWidth = 0.1;

}

        var w5 = function() {

            ctx.lineWidth = 5;

}

        var w15 = function() {

            ctx.lineWidth = 15;

}

        // 색 설정

        var yellow = function() {

            ctx.strokeStyle = '#ffff00';

}

        var green = function() {

            ctx.strokeStyle = '#00ff00';

}

        var red = function() {

            ctx.strokeStyle = '#ff0000';

}

        var blue = function() {

            ctx.strokeStyle = '#0000ff';

}

        var purple = function() {

            ctx.strokeStyle = '#ff3f60';

}

        var black = function() {

            ctx.strokeStyle = '#000000';

}

        // 그리기 시작

        var drawStart = function(event) {

            ctx.beginPath(); // 캔버스에 선 긋기 준비

            var xpos = event.target.offsetLeft;

            var ypos = event.target.offsetTop;

            ctx.moveTo(event.clientX-xpos, event.clientY-ypos); // 해당좌표에서 시작

            flag = true;

}

        // 그리는중

        var drawing = function(event) {

            if(flag)

{

                var xpos = event.target.offsetLeft;

                var ypos = event.target.offsetTop;

                ctx.lineCap = 'round';

                ctx.lineTo(event.clientX - xpos, event.clientY - ypos);

                ctx.stroke(); // 최종 마무리

}

}

        // 그리기 마무리

        var drawEnd = function(event) {

            flag = flase; // 그리기가 끝나면 마우스 떼기

}

        // PNG 파일로 저장

        var savePNG = function() {

            window.open(canvas.toDataURL());

}

        // 캔버스 비우기

        var erase = function() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);

}

    </script>

</head>

<body onload="ready()">

    <div>

        <input type="button" value="PNG 파일로 저장" onclick="savaPNG()"></input>

        <input type="button" value="새로 그리기" onclick="erase()"></input>

|

        <input type="button" value="펜 굵게" onclick="w15()"></input>

        <input type="button" value="펜 보통" onclick="w5()"></input>

        <input type="button" value="펜 얇게" onclick="w1()"></input>

|

        <input type="button" value="노랑" onclick="yellow()"></input>

        <input type="button" value="초록" onclick="green()"></input>

        <input type="button" value="빨강" onclick="red()"></input>

        <input type="button" value="파랑" onclick="blue()"></input>

        <input type="button" value="보라" onclick="purple()"></input>

        <input type="button" value="검정" onclick="black()"></input>

    </div>

    <canvas id="canvas" width="675" height="250"></canvas>

</body>

</html>

React 사용 중인 프로젝트에 TypeScript 사용하기 (0)	2020.03.05
JQuery - Html5 data-, Travarsing, Shadow DOM (0)	2018.09.04
js 주석처리 (0)	2018.07.10
자바스크립트 계산기 (0)	2017.11.17
자바스크립트 오전/오후 원하는 날짜 시간 (0)	2017.09.27

인기포스트 MORE POST