USDT走分システム開発

canvasの常用機能、USDT走分システム開発(T:I 8 O-285 I-O 282 V林)前言:
canvasは単独でフロントエンドの大きな知識モジュールと言えるので、今日検討します.
まず前文の敷物を作ります.
①canvasの作成
②canvasの取得

var cavs = document.getElementById("cavs");           //  canvas
var ctx = cavs.getContext("2d");                     //         2d  
    ctx.moveTo(100, 100);                           //   
    ctx.lineTo(200, 200);                          //   

③常用様式

     ctx.strokeStyle = "#f00"                 //     2
     ctx.lineWidth = 10;                    //    

④線を引く
　　　　　 ctx.stroke();//線を描く⑤塗りつぶし
　　　　　ctx.fillStyle = "yellow";//塗りつぶし色ctx.fill();//充填を行う⑥終了を開始する

     ctx.beginPath();    //  
     ctx.closePath();    //  

⑦その他

     var img = ctx.getImageData(x, y, width, height);     //  canvas   
     ctx.putImageData(img, width, height)            // img  canvas 
     ctx.clearRect(x,y,canvas.width,canvas.height)         //    

本文:
いくら言っても無駄で、結局実戦を行い、ついに本文に入った.
HTMLセクション

css部分
*{ padding: 0; margin: 0;}.wrapper{ margin: 15px;}.wrapper canvas{ border:1px solid #000; border-radius: 25px; box-shadow:10px 10px 5px #999; margin-bottom: 20px;}.wrapper ul{ width: 1000px; text-align: center;}.wrapper ul li{ display: inline-block; margin-left: 40px;}.wrapper ul li input{ display: block; background: #ddd; color: #000; border-radius: 25px; border:none; padding: 10px 20px; font-size: 15px; transition-duration: 0.2s;}.wrapper ul li input:hover{ background: #999; border: 1px solid #f00; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3);}js部分
function ID(str) { return document.getElementById(str);}
var darwingLineObj={cavs:this.ID("canvas")、color:this.ID("color")、clear:this.ID("clear")、eraser:this.ID("eraser")、rescind:this.ID("rescind")、weight:this.ID("weight")、bool:false、arrImg:[]、//初期化init:function(){

this.draw();

}, draw:function(){

var cavs = this.cavs,
    self = this,
    ctx = cavs.getContext("2d");
    ctx.lineWidth = 15;
    ctx.lineCap = "round";          //       
    ctx.lineJoin = "round";         //     

var c_x = cavs.offsetLeft,          //         
    c_y = cavs.offsetTop;           //canvas    
    

cavs.onmousedown = function(e){
  e = e || window.event;
  self.bool = true;
  var m_x = e.pageX - c_x;
  var m_y = e.pageY - c_y;
  ctx.beginPath();
  ctx.moveTo(m_x,m_y);   //         

  var imgData = ctx.getImageData(0, 0, cavs.width, cavs.height);  //           
  self.arrImg.push(imgData);
}

cavs.onmousemove = function(e){
    if(self.bool){
      ctx.lineTo(e.pageX-c_x, e.pageY-c_y);
      ctx.stroke();
    }
  }

cavs.onmouseup = function(e){
  self.bool = false;
  ctx.closePath();
}

self.color.onchange = function(e){      //    
  e = e || window.event;
  //console.log(e.target.value)
  ctx.strokeStyle = e.target.value;
}

self.clear.onclick = function(){
  ctx.clearRect(0,0,cavs.width,cavs.height)
}

self.eraser.onclick = function(){
  ctx.strokeStyle = "#fff";
}

self.rescind.onclick = function(){            //       
  if (self.arrImg.length>0) {
    ctx.putImageData(self.arrImg.pop(),0,0)
  }
}

self.weight.onchange = function(e){       //      
  //console.log(e.target.value)
  ctx.lineWidth = e.target.value;     
}

}//draw end
}
darwingLineObj.init();