要求
// 要求鼠标落下时 获取鼠标相对位置
// 鼠标移动时 不停的绘制路径 画到鼠标相对画布的新位置
// 鼠标抬起时 结束绘制
代码如下
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: black;
}
#c1{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
<input type="color">
<input type="number">
<script>
// 要求鼠标落下时 获取鼠标相对位置
// 鼠标移动时 不停的绘制路径 画到鼠标相对画布的新位置
// 鼠标抬起时 结束绘制
var oC = document.getElementById("c1");
var oCG = oC.getContext("2d");
var oIn1 = document.getElementsByTagName("input")[0];
var oIn2 = document.getElementsByTagName("input")[1];
oC.onmousedown = function (ev){
var disX = ev.pageX - oC.offsetLeft;
var disY = ev.pageY - oC.offsetTop;
oCG.strokeStyle = oIn1.value;
oCG.lineWidth = oIn2.value;
oCG.beginPath();
oCG.moveTo(disX,disY);
document.onmousemove = function (ev){
oCG.lineTo(ev.pageX - oC.offsetLeft,ev.pageY - oC.offsetTop);
oCG.stroke();
}
document.onmouseup = function (){
document.onmouseup = document.onmousemove = null;
}
}
</script>
</body>
</html>