本篇文章為大家展示了怎么在JavaScript中使用Canvas自定義畫板，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

公司主營業(yè)務：做網(wǎng)站、成都網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出南丹免費做網(wǎng)站回饋大家。

  
  




   
  var canvas = document.getElementById("canvas");   
  var ctx = canvas.getContext("2d");   
  //畫一個黑色矩形   
  ctx.fillStyle="black";   
  ctx.fillRect(0,0,600,300);   
  //按下標記   
  var onoff = false;  
  //變量oldx跟oldy代表鼠標移動前的坐標  
  var oldx = -10;   
  var oldy = -10;   
  //設置顏色  
  var linecolor = "white";   
  //設置線寬   
  var linw = 4;   
  //添加鼠標移動事件   
  canvas.addEventListener("mousemove",draw,true);  //第三個參數(shù)主要跟捕獲或者冒泡有關(guān)   
  //添加鼠標按下事件   
  canvas.addEventListener("mousedown",down,false);   
  //添加鼠標彈起事件   
  canvas.addEventListener("mouseup",up,false);   
  function down(event){     
   onoff = true;     
   oldx = event.pageX-10;      
   oldy = event.pageY-10;  
   //console.log(event.pageX+'..............000.............'+event.pageY);
  //event.pageX跟event.pageY相對于整個頁面鼠標的位置 包括溢出的部分（就是滾動條）   
  }   
  function up(){     
   onoff = false;   
 }  
 function draw(event){    
  if(onoff == true){        
   var newx = event.pageX-10;        
   var newy = event.pageY-10;        
   ctx.beginPath();//beginPath() 丟棄任何當前定義的路徑并且開始一條新的路徑。它把當前的點設置為 (0,0)。       
   ctx.moveTo(oldx,oldy);   //移動到點擊時候的坐標，以那個坐標為原點      
   ctx.lineTo(newx,newy);   //繪制新的路徑       
   ctx.strokeStyle=linecolor;       
   ctx.lineWidth=linw;       
   ctx.lineCap="round";       
   ctx.stroke();//stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。    
//將新的鼠標位置賦給下一次開始繪制的起始坐標      
   oldx = newx;      
   oldy = newy;   
  };
 };

上述內(nèi)容就是怎么在JavaScript中使用Canvas自定義畫板，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。