canvas 原生实现写字板

预览效果

直接上代码

    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);