댓글 : HTML5 간단한 드로잉 보드 코드 공유, 참조하십시오.
HTML5 간단한 드로잉 보드
<! doctype html>
<html lang = "en-us">
<헤드>
<제목> </title>
<meta charset = "utf-8">
<script src = "<a href ="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> "> </script </a >>
</head>
<스타일>
캔버스 {테두리 : 2px solid #000;}
</스타일>
<body>
<canvas> </canvas>
<script type = "text/javaScript">
$ (document) .ready (function () {
var canvas = document.getElementById ( "draw");
var draw = canvas.getContext ( "2d");
draw.linewidth = 5; // 선 두께
draw.strokestyle = "빨간색"; //색상
var Godraw = 거짓;
// 마우스를 누릅니다
$ ( "#draw"). Mousedown (function (e) {
// 정확한 좌표
var mousex = e.pagex-this.offsetleft;
var mousey = e.pagey- this.offsettop;
draw.moveto (Mousex, Mousey);
Godraw = true; </p> <p>})
// 마우스를 보내십시오
$ ( "#draw"). Mouseup (function (e) {
Godraw = 거짓;
})
// 마우스를 움직입니다
$ ( "#draw"). MouseMove (function (e) {
if (Godraw) {
var mousex = e.pagex-this.offsetleft;
var mousey = e.pagey- this.offsettop;
draw.lineto (Mousex+4, Mousey+4);
draw.stroke ();
} </p> <p>}))
})
</스크립트>
</body>
</html>
복제 다이어그램