好友
阅读权限10
听众
最后登录1970-1-1
|
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#myCanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
</body>
<script src="mycanvas.js">
</script>
</html>
---------------------------------------------------------
js
var canvas=document.getElementById('myCanvas');
var pen=canvas.getContext('2d');
pen.lineWidth=1;
pen.strokeStyle="red";
var mousePress=false;
var last=null;
function pos(event){
var ex,ey;
ex=event.clientX;
ey=event.clientY;
return(x:ex,y:ey)
}
function start(event){
mousePress=true;
}
function draw(event){
if(!mousePress) return;
var xy=pos(event);
if(last != null){
pen.beginPath();
pen.moveTo(last.x,last.y);
pen.lineto(xy.x,xy.y);
pen.stroke();
}
last=xy;
}
function finish(event){
mousePress=false;
last=null;
}
canvas.onmousedown=start;
canvas.onmousemove=draw;
canvas.onmouseup=finish;
|
|
发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。 |
|
|
|
|
|
|
发表于 2024-3-19 20:27
|
发表于 2024-3-19 21:02
