<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>painting</title> </head> <body> <canvas class="myCanvas" width="500px" height="500px" style="display: block;margin: auto;background: #ECF3F8;cursor: pointer"></canvas> <input type="color" id="color"/> <input type="range" id="range" min="1" max="100" value="5"/> <span id="show"></span> </body> <script> window.onload = function(){ var c = document.getElementsByClassName('myCanvas')[0];//获取节点 var ctx = c.getContext('2d');//这里面只能是2d表示在二维的画布里写的意思 var range = document.getElementById('range');//获取节点 var show = document.getElementById('show');//获取节点 function change(){//这是改变画笔粗细的函数 show.innerText= range.value;//span标签里的值即为range标签里选择的大小 requestAnimationFrame(change);//span标签里的数字随着range的改变而改变，这是递归 }change();//调用 var moveNum = false;//声明变量 c.onmousedown = function (e) {//鼠标按下事件 var e = e || event;//解决兼容问题 var x = e.clientX - c.offsetLeft;//找到鼠标的横坐标 var y = e.clientY - c.offsetTop;//鼠标的纵坐标即 ctx.beginPath();//起笔 ctx.lineWidth = range.value;//线条的粗细 var color = document.getElementById('color');//获取节点 var val = color.value;//获取节点的值 ctx.strokeStyle = val;//将颜色的值赋给线条样式 ctx.moveTo(x,y);//画笔的起点位置 moveNum = true;//令moveNum等于true， }; c.onmousemove = function(){//鼠标移动事件 var e = e || event;//兼容问题 var x = e.clientX - c.offsetLeft; var y = e.clientY - c.offsetTop; if(moveNum){//如果move为true即为有值的情况下也就是说必须鼠标按下过后才能执行操作 ctx.lineTo(x,y);//终点，也就是鼠标弹起的情况就停止了绘画 ctx.stroke();//采用线性的方式绘画 } }; document.onmouseup = function(){//鼠标弹起事件 return moveNum = false;//返回moveNum为false即为无值得情况，则什么也不做即结束绘画 }; } </script> </html>
以上注释只是我个人的想法，可能有理解有误的地方，谢谢