02Canvas 畫板

1、功能描述

實現畫畫功能，並可切換畫筆顏色、細條粗細。可保存、清空畫板。

2、思路

創建畫板——》監聽滑鼠（觸屏）事件——》繪製路線

3、具體操作

3.1 創建畫板

通過canvas創建畫板

<canvas id="xxx" width_=300 height=300></canvas>

3.2 監聽滑鼠（觸屏）事件

監聽滑鼠（觸屏）事件，當滑鼠按下（觸屏）時進行繪畫，根據滑鼠（手指）移動路線繪製，鬆開滑鼠（手指離屏）時停止繪畫。

canvas.ontouchstart = function(aaa){ var x = aaa.touches[0].clientX; var y = aaa.touches[0].clientY; using = true; if(isEraser){ context.clearRect(x-5,y-5,10,10); } else{ lastpoint = {"x":x,"y":y}; }}canvas.ontouchmove = function(aaa){ var x = aaa.touches[0].clientX; var y = aaa.touches[0].clientY; if(using == false){return;} if(isEraser){ context.clearRect(x-5,y-5,10,10); } else{ var newPoint = {"x":x,"y":y} //drawCircle(x,y); drawLine(lastPoint.x,lastPoint.y,newPoint.x,newPoint.y); lastPoint = newPoint; }}canvas.ontouchend = function(){ using = false; lastPoint = {"x":undefined,"y":undefined};}

3.3 繪製路線

通過點與線的連接，實現繪畫功能。

function drawLine(x1,y1,x2,y2){ context.beginPath(); context.moveTo(x1,y1); context.lineWidth = lineWidth; context.lineTo(x2,y2); context.stroke(); context.closePath();}

4、相關知識點

4.1 js

監聽滑鼠點擊事件

按下去滑鼠 document.onmousedown =function(x){console.log(x)}

移動滑鼠 document.onmousemove = function(y){console.log(y)}

鬆開滑鼠 document.onmouseup = function(z){console.log(1)}

監聽觸摸事件（因為手機上沒有mouse所以用touch）

開始觸摸 canvas.ontouchstart = function(aaa){}

結束觸摸 canvas.ontouchend = function(aaa){}

邊摸邊動 canvas.ontouchmove = function(aaa){}

通過特性檢測得知是用mouse還是touch

• 方法1
• 如果設備支持 ontouchstart，結果是null
• 如果設備不支持ontouchstart，結果是undefined
• 方法2
• 移動端 『ontouchstarts』 in document.body——》true
• 手機端 『ontouchstarts』 in document.body——》false
• 特性檢測 document.body.ontouchstart
• 觸屏設備 canvas.ontouchstart
• 非觸屏設備 canvas.onmousedown

touch時把當前所有touch事件都存到了touches中，所以從touches[0]中獲取坐標

用div畫畫

首先獲取滑鼠在視圖上的x、y，然後生成1個div，並設置div的樣式，最後將div放到畫板（div）中。即可打點。

缺點：元素畫畫只能畫點，沒辦法連線。

用canvas畫畫

• 矩形
• 獲取畫板 var yyy =document.getElementById(『xxx』);
• 獲取2d上下文 var context =yyy.getContext(「2d」);
• 填充樣式 context.fillStyle = 『red』;
• 填充、描邊矩形 context.fillRect(0,0,100,100);
• 描邊樣式 context.strokeStyle= 『yellow』;
• 描述矩形 context.strokeRect(10,0,100,100);
• 清除 context.clearRect(50,50,60,60);
• 畫線
• 開始 context.beginPath();
• 起點 context.moveTo(80,80);
• 畫線 context.lineTo(100,80);
• 結束 context.fill();
• 畫圓
• 開始 context.beginPath()
• 畫圓 context.arc(150,150,半徑,開始角度,結束角度)
• 結束 context.fill()
• 點與線連起來

出現第1個點第2個點的時候之間連個線，即mouseDown的時候為第1個點，mouseMove的時候為第2個點。並每次記錄上1個點。

獲取頁面寬高

document.documentElement.clientWidth

document.documentElement.clientHeight

一個按鈕只做一件事

讓頁面縮放

content="width_=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

in操作符

varhash = {a:1,b:2,c:3}『a』in hash——》true『d』in hash——》false

禁止滾動條 overflow:hidden

在移動端讓canvas不移動 絕對定位 position:fixed; top:0; left:0;

5、實際成果

https://www.zhihu.com/video/1016742796794949632
推薦閱讀：