canvas实现鼠标划线
程序员文章站
2024-02-25 18:17:51
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="my" width="1000" height="700" style="border: 1px solid #f00;"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("my");
var ctx = c.getContext("2d");
c.onmousedown = function(e){
var e = e ||event;
var ox = e.clientX -c.offsetLeft;
var oy = e.clientY - c.offsetTop;
ctx.moveTo(ox,oy);
document.onmousemove = function(e){
var ox2 = e.clientX -c.offsetLeft;
var oy2 = e.clientY - c.offsetTop;
ctx.lineTo(ox2,oy2);
ctx.stroke();
}
document.onmouseup = function(e){
document.onmousemove =null;
document.onmouseup = null;
}
}
</script>
</html>