<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="800" height="600" id="ocanvas" style="border:1px solid #c3c3c3"></canvas>
<input type="submit" value="清空">
<script>
var ocanvas=document.getElementById("ocanvas");
var ctx=ocanvas.getContext("2d");
var input=document.getElementsByTagName("input")[0];
input.onclick=function () {
ctx.clearRect(0,0,800,600)
};
ocanvas.onmousedown=function (e) {
var ev=window.event||e;
ctx.beginPath();
var x=ev.clientX;
var y=ev.clientY;
ctx.moveTo(x,y);
ocanvas.onmousemove=function (e) {
var ev=window.event||e;
var x=ev.clientX;
var y=ev.clientY;
ctx.lineTo(x,y);
ctx.strokeStyle="red";
ctx.stroke();
};
ocanvas.onmouseup=function (e) {
var ev=window.event||e;
ctx.closePath();
ocanvas.onmousemove="none";
}
};
</script>
</body>
</html>
帆布涂鸦
猜你喜欢
转载自blog.csdn.net/moonlight201868/article/details/81209063
今日推荐
周排行