|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>마우스 드래깅으로 캔버스에 그림 그리기</title></head> <body onload="init()"> <h3>마우스를 누른 채 드래깅하여 그림 그려 보세요</h3> <hr> <canvas id="FRESH" style="background-color:aliceblue" width="400" height="300"> </canvas> <script> var canvas, context; function init() { canvas = document.getElementById("FRESH"); context = canvas.getContext("2d");
context.lineWidth = 2; // 선 굵기를 2로 설정 context.strokeStyle = "#FF007F";
// 마우스 리스너 등록. e는 MouseEvent 객체 canvas.addEventListener("mousemove", function (e) { move(e) }, false); canvas.addEventListener("mousedown", function (e) { down(e) }, false); canvas.addEventListener("mouseup", function (e) { up(e) }, false); canvas.addEventListener("mouseout", function (e) { out(e) }, false); }
var startX=0, startY=0; // 드래깅동안, 처음 마우스가 눌러진 좌표 var drawing=false; function draw(curX, curY) { context.beginPath(); context.moveTo(startX, startY); context.lineTo(curX, curY); context.stroke(); } function down(e) { startX = e.offsetX; startY = e.offsetY; drawing = true; } function up(e) { drawing = false; } function move(e) { if(!drawing) return; // 마우스가 눌러지지 않았으면 리턴 var curX = e.offsetX, curY = e.offsetY; draw(curX, curY); startX = curX; startY = curY; } function out(e) { drawing = false; } </script> </body> </html> |
cs |
따로 설명은 없습니다. 궁금한 내용은 댓글 달아 주시면 답변 드리겠습니다
'개발이야기 > Html&CSS' 카테고리의 다른 글
| CSS Flexbox: 웹 디자인을 위한 궁극의 가이드 (0) | 2024.01.16 |
|---|---|
| Material Design Lite Color 색상표 (0) | 2019.01.10 |
| Material Design DatePicker 사용하기 (날짜 선택기) (0) | 2018.02.08 |
| 미적감각 없는 개발자를 위한 반응형 프레임워크(FrameWork) (0) | 2018.01.29 |
