亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在JavaScript中使用Canvas自定義畫板

發布時間:2021-04-14 16:01:59 來源:億速云 閱讀:178 作者:Leah 欄目:web開發

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

<!DOCTYPE HTML>
<html>
<head>  
<meta charset="utf-8" />  
<title>JavaScript+Canvas實現自定義畫板</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");   
  //畫一個黑色矩形   
  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);  //第三個參數主要跟捕獲或者冒泡有關   
  //添加鼠標按下事件   
  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;   
  };
 };
</script>
</body>
</html>

上述內容就是怎么在JavaScript中使用Canvas自定義畫板,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

荣昌县| 九龙县| 马龙县| 麟游县| 博野县| 墨玉县| 广安市| 宁南县| 卢湾区| 龙里县| 浦东新区| 南部县| 天镇县| 招远市| 惠州市| 清苑县| 庄河市| 湖口县| 大冶市| 通渭县| 临泽县| 延庆县| 岗巴县| 永仁县| 稻城县| 尤溪县| 丰县| 江城| 舟曲县| 东方市| 亳州市| 灵寿县| 安多县| 友谊县| 霍城县| 邵东县| 沽源县| 宣汉县| 行唐县| 绩溪县| 榕江县|