canvas簡易画板(PC端と移動端)

    
    
    
    


    
    
    

    
         
    


  var selector = document.getElementById("colorSelect");
    //  color 
    var color = null;
    //  color 
    selector.onchange = function(){
        color = this.value;
    }
    var canvas = document.getElementById("canvas");
    var cxt = canvas.getContext("2d");    
    if(document.documentElement.clientWidth>768){    
           huaD();
           qingkong();
 }else{
        huaS();
        qingkong();
  }
//  
 window.onresize = function(){          
   if(document.documentElement.clientWidth>768){    
           huaD();
           qingkong(); 
 }else{
         huaS();
        qingkong();
 }
}
//pc 
      function huaD(){
         canvas.onmousedown = function(e){
        //  canvas x y  
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
        cxt.beginPath();
        cxt.moveTo(x,y);
        canvas.onmousemove = function(e){
            var x = e.clientX - canvas.offsetLeft;
            var y = e.clientY - canvas.offsetTop;
            cxt.lineTo(x,y);
            cxt.strokeStyle=color;
            cxt.stroke();
        }
        //    move 
        canvas.onmouseup = function(){
            canvas.onmousemove = null;
        }
    }

  }
// 
  function huaS(){
            canvas.addEventListener("touchstart", function(e){
             var x = e.changedTouches[0].clientX - e.target.offsetLeft;
             var y = e.changedTouches[0].clientY - e.target.offsetTop;
             cxt.beginPath();
             cxt.moveTo(x,y);

             canvas.addEventListener("touchmove", function(e){                 
                e.preventDefault(); 
                var x = e.changedTouches[0].clientX - e.target.offsetLeft;
                var y = e.changedTouches[0].clientY - e.target.offsetTop;              
                cxt.lineTo(x,y);
                cxt.strokeStyle=color;
                cxt.stroke();         
            }, false)
        }, false)
  }
// 
 function qingkong(){
        cxt.clearRect(0,0,500,500);
        console.log(11);
     }

// 
  document.body.addEventListener("touchmove", function(e){
         e.preventDefault();
     })