预览效果
![](https://i-blog.csdnimg.cn/blog_migrate/41902d5b16b15fc7bd394629f57205b1.png)
直接上代码
function $(name){return document.querySelector(name)}
function MouseDown(e){
is = true;
if(e.touches){
var x = e.touches[0].clientX,y = e.touches[0].clientY;
}else{
var x = e.x,y = e.y;
}
ctx.moveTo(x-10,y-10);
}
function MouseMove(e){
if(is){
if(e.touches){
var x = e.touches[0].clientX,y = e.touches[0].clientY;
}else{
var x = e.x,y = e.y;
}
ctx.lineTo(x-10,y-10)
ctx.stroke();
}else return
}
function MouseUp(){is = false}
var is = false;
var cvs = $('canvas');
var ctx = cvs.getContext("2d");
cvs.addEventListener('mousedown',MouseDown,false);
cvs.addEventListener('mousemove',MouseMove,false);
cvs.addEventListener('mouseup',MouseUp,false);
cvs.addEventListener('touchstart',MouseDown,false);
cvs.addEventListener('touchmove',MouseMove,false);
cvs.addEventListener('touchend',MouseUp,false);