JavaScript+Canvas實現自定義畫板

時間 2020-05-04

標籤 javascript+canvas javascript canvas 實現自定義畫板欄目 JavaScript 简体版

原文原文鏈接

最近研究了HTML5一些新的元素屬性，發現確實好用，特別是裏面的Canvas這個新的標籤元素。官方介紹：Canvas API（畫布）是在HTML5中新增的標籤用於在網頁實時生成圖像，而且能夠操做圖像內容，基本上它是一個能夠用JavaScript操做的位圖（bitmap）。如下使用JavaScript結合Canvas實現一個畫板功能 javascript

效果演示圖：html

代碼部分（直接複製即可使用）java

<!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>