怎么在JavaScript中使用Canvas自定義畫板-創(chuàng)新互聯(lián)

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

在成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營(yíng)銷成為有效果、有回報(bào)的無錫營(yíng)銷推廣。創(chuàng)新互聯(lián)專業(yè)成都網(wǎng)站建設(shè)10多年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。

<!DOCTYPE HTML>
<html>
<head>  
<meta charset="utf-8" />  
<title>JavaScript+Canvas實(shí)現(xiàn)自定義畫板</title>
</head>
<body>
<canvas id="canvas"  width="600" height="300"></canvas>
<script type="text/javascript">   
  var canvas = document.getElementById("canvas");   
  var ctx = canvas.getContext("2d");   
  //畫一個(gè)黑色矩形   
  ctx.fillStyle="black";   
  ctx.fillRect(0,0,600,300);   
  //按下標(biāo)記   
  var onoff = false;  
  //變量oldx跟oldy代表鼠標(biāo)移動(dòng)前的坐標(biāo)  
  var oldx = -10;   
  var oldy = -10;   
  //設(shè)置顏色  
  var linecolor = "white";   
  //設(shè)置線寬   
  var linw = 4;   
  //添加鼠標(biāo)移動(dòng)事件   
  canvas.addEventListener("mousemove",draw,true);  //第三個(gè)參數(shù)主要跟捕獲或者冒泡有關(guān)   
  //添加鼠標(biāo)按下事件   
  canvas.addEventListener("mousedown",down,false);   
  //添加鼠標(biāo)彈起事件   
  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相對(duì)于整個(gè)頁(yè)面鼠標(biāo)的位置 包括溢出的部分（就是滾動(dòng)條）   
  }   
  function up(){     
   onoff = false;   
 }  
 function draw(event){    
  if(onoff == true){        
   var newx = event.pageX-10;        
   var newy = event.pageY-10;        
   ctx.beginPath();//beginPath() 丟棄任何當(dāng)前定義的路徑并且開始一條新的路徑。它把當(dāng)前的點(diǎn)設(shè)置為 (0,0)。       
   ctx.moveTo(oldx,oldy);   //移動(dòng)到點(diǎn)擊時(shí)候的坐標(biāo)，以那個(gè)坐標(biāo)為原點(diǎn)      
   ctx.lineTo(newx,newy);   //繪制新的路徑       
   ctx.strokeStyle=linecolor;       
   ctx.lineWidth=linw;       
   ctx.lineCap="round";       
   ctx.stroke();//stroke() 方法會(huì)實(shí)際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認(rèn)顏色是黑色。    
//將新的鼠標(biāo)位置賦給下一次開始繪制的起始坐標(biāo)      
   oldx = newx;      
   oldy = newy;   
  };
 };
</script>
</body>
</html>

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

標(biāo)題名稱：怎么在JavaScript中使用Canvas自定義畫板-創(chuàng)新互聯(lián)
本文路徑：http://jinyejixie.com/article40/djsheo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、靜態(tài)網(wǎng)站、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站制作、微信公眾號(hào)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

怎么在JavaScript中使用Canvas自定義畫板-創(chuàng)新互聯(lián)