在线画图
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
|
<!DOCTYPE html>
<html>
<head lang=
"en"
>
<meta charset=
"UTF-8"
>
<title></title>
</head>
<body>
<canvas width=
"600"
height=
"600"
id=
"canvas"
style=
"border:1px solid red;"
></canvas>
<script>
var
canvas = document.getElementById(
'canvas'
);
var
cxt = canvas.getContext(
'2d'
);
canvas.onmousedown =
function
(ev){
var
x = ev.clientX - canvas.offsetLeft;
var
y = ev.clientY - canvas.offsetTop;
cxt.beginPath();
cxt.moveTo(x, y);
document.onmousemove =
function
(ev){
var
x = ev.clientX - canvas.offsetLeft;
var
y = ev.clientY - canvas.offsetTop;
cxt.lineTo(x, y);
cxt.stroke();
};
};
document.onmouseup =
function
(){
cxt.closePath();
document.onmousemove =
null
;
};
</script>
</body>
</html>
|