學(xué)習(xí)制作畫(huà)板之前诸衔，我們先來(lái)了解一下canvas標(biāo)簽
一.canvas標(biāo)簽
1.canvas標(biāo)簽與img標(biāo)簽相似，但是canvas標(biāo)簽是一個(gè)閉合標(biāo)簽下隧，并且沒(méi)有src alt屬性收毫。
2.canvas標(biāo)簽有兩個(gè)屬性攻走，width，height此再。我們?cè)陧?yè)面上用canvas繪制一個(gè)畫(huà)布時(shí)昔搂，應(yīng)用width，height屬性設(shè)置大小输拇，如果用css設(shè)置摘符，繪制圖像時(shí)可能會(huì)出現(xiàn)扭曲。
3.渲染上下文 context
canvas起初是空白的策吠。為了展示逛裤，首先腳本需要找到渲染上下文，然后在它的上面繪制猴抹。
getContext()方法可以獲取到上下文context.
二.制作畫(huà)板
畫(huà)板功能：可以繪制不同顏色和粗細(xì)的線條带族，畫(huà)板上有橡皮擦功能，一鍵清除功能蟀给，下載功能蝙砌。
1.首先我們需要繪制一個(gè)自適應(yīng)屏幕寬度的畫(huà)布。
function wResize() {
var pageWidth = document.documentElement.clientWidth
var pageHeight = document.documentElement.clientHeight
canvas.width = pageWidth
canvas.height = pageHeight
}
2.當(dāng)用戶在畫(huà)板上繪畫(huà)時(shí)有三種狀態(tài)跋理，鼠標(biāo)點(diǎn)擊態(tài)择克，鼠標(biāo)移動(dòng)態(tài)，鼠標(biāo)離開(kāi)態(tài)前普。
我們可以用mousedown,mousemove ,mouseup來(lái)監(jiān)聽(tīng)三種狀態(tài)肚邢。
當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)：
canvas.onmousedown = function (a) {
var x = a.clientX;
var y = a.clientY;
using = true;//設(shè)置變量，標(biāo)志開(kāi)始使用畫(huà)布
if (eraserEnabled) {//如果標(biāo)志使用橡皮擦拭卿，則清除畫(huà)布內(nèi)容
context.clearRect(x, y, 20, 20);
}
else {否則記錄當(dāng)前鼠標(biāo)坐標(biāo)
lastPoint = {x: x, y: y}
}
}
當(dāng)用戶鼠標(biāo)移動(dòng)時(shí)：
canvas.onmousemove = function (a) {
var x = a.clientX;
var y = a.clientY;
if (!using) {return}//判斷是否使用畫(huà)板
if (eraserEnabled) {//如果標(biāo)志使用橡皮擦骡湖，則清除畫(huà)布內(nèi)容
context.clearRect(x, y, 20, 20);
}
else{//如果沒(méi)有使用橡皮擦
var newPoint = {"x": x, "y": y};//記錄鼠標(biāo)移動(dòng)到的新坐標(biāo)
drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y) //繪制線條
lastPoint = newPoint;//將當(dāng)前坐標(biāo)作為下次移動(dòng)的首坐標(biāo)
}
}
當(dāng)鼠標(biāo)離開(kāi)時(shí)：
canvas.onmouseup = function (a) {
using = false;//設(shè)置變量，標(biāo)志不使用畫(huà)板
}
3.繪制直線
function drawLine(x1, y1, x2, y2) {
context.beginPath();//開(kāi)始移動(dòng)筆觸记劈，路徑開(kāi)始
context.moveTo(x1, y1);//其實(shí)坐標(biāo)
context.lineWidth = lineWidth ;//默認(rèn)線條粗細(xì)
context.lineTo(x2, y2);//結(jié)束坐標(biāo)
context.stroke();
context.closePath();//結(jié)束筆觸勺鸦，路徑結(jié)束
}
stroke()：通過(guò)線條來(lái)繪制圖形輪廓。
fill()：通過(guò)填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形
4.畫(huà)筆功能
pen.onclick = function(){
eraserEnabled = false;//設(shè)置變量目木，標(biāo)志不使用橡皮擦
pen.classList.add('active');//設(shè)置畫(huà)板上畫(huà)筆按鈕的樣式變化
eraser.classList.remove('active');//設(shè)置畫(huà)板上橡皮擦按鈕的樣式變化
}
5.橡皮擦功能
eraser.onclick = function(){
eraserEnabled = true;//標(biāo)志使用橡皮擦
eraser.classList.add('active');//設(shè)置畫(huà)板上橡皮擦按鈕的樣式變化
pen.classList.remove('active');//設(shè)置畫(huà)板上畫(huà)筆按鈕的樣式變化
}
6.一鍵清除功能
clear.onclick = function(){
context.clearRect(0,0,canvas.width,canvas.height);
}
這里使用了clearRect(x, y, width, height)方法换途，清除指定矩形區(qū)域，讓清除部分完全透明刽射。x,y坐標(biāo)為其實(shí)坐標(biāo)军拟，width, height為清除矩形區(qū)域的大小。
7.一鍵下載功能
download.onclick = function(){
var url = canvas.toDataURL('image/png');
var a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = 'context';
a.click();
}
canvas.toDataURL('image/png');該方法返回一個(gè)png格式的圖片展示的url誓禁，當(dāng)用戶點(diǎn)擊畫(huà)板上的下載按鈕懈息，在html中插入一個(gè)a標(biāo)簽，a.download指向畫(huà)布的上下文,download 屬性規(guī)定被下載的超鏈接目標(biāo)摹恰。
三.手機(jī)適配的畫(huà)板
1.添加meta標(biāo)簽:因?yàn)闉g覽器初始會(huì)將頁(yè)面現(xiàn)在手機(jī)端顯示時(shí)進(jìn)行縮放辫继，因此我們可以在meta標(biāo)簽中設(shè)置meta viewport屬性怒见，告訴瀏覽器不將頁(yè)面進(jìn)行縮放，頁(yè)面寬度=用戶設(shè)備屏幕寬度
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2.移動(dòng)端監(jiān)聽(tīng)鼠標(biāo)事件的方法與pc端不同
當(dāng)鼠標(biāo)點(diǎn)擊時(shí)用ontouchstart方法監(jiān)聽(tīng)：
canvas.ontouchstart = function(a){
var x = a.touches[0].clientX;
var y =a.touches[0].clientY;
using = true;
if (eraserEnabled) {
context.clearRect(x, y, 20, 20);
}
else {
lastPoint = {x: x, y: y}
}
}
當(dāng)鼠標(biāo)移動(dòng)是用ontouchmove方法監(jiān)聽(tīng)：
canvas.ontouchmove = function(a){
var x = a.touches[0].clientX;
var y = a.touches[0].clientY;
if (!using) {return}
if (eraserEnabled) {
context.clearRect(x, y, 20, 20);
}
else{
var newPoint = {"x": x, "y": y};
drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
lastPoint = newPoint;
}
}
當(dāng)鼠標(biāo)離開(kāi)時(shí)用ontouchend方法監(jiān)聽(tīng)：
canvas.ontouchhend = function(a){
using = false;
}
