Canvas畫板—手機上也可以用的畫板

tinawang發表於2018-01-16
Canvas

學習製作畫板之前，我們先來了解一下canvas標籤

一.canvas標籤

1.canvas標籤與img標籤相似，但是canvas標籤是一個閉合標籤，並且沒有src alt屬性
2.canvas標籤有兩個屬性，width，height。我們在頁面上用canvas繪製一個畫布時，應用width，height屬性設定大小，如果用css設定，繪製影像時可能會出現扭曲。
3.渲染上下文 context
canvas起初是空白的。為了展示，首先指令碼需要找到渲染上下文，然後在它的上面繪製。
getContext()方法可以獲取到上下文context.

二.製作畫板

畫板功能：可以繪製不同顏色和粗細的線條，畫板上有橡皮擦功能，一鍵清除功能，下載功能。

1.首先我們需要繪製一個自適應螢幕寬度的畫布。

 function wResize() {
        var pageWidth = document.documentElement.clientWidth
        var pageHeight = document.documentElement.clientHeight

        canvas.width = pageWidth
        canvas.height = pageHeight
    }

2.當使用者在畫板上繪畫時有三種狀態，滑鼠點選態，滑鼠移動態，滑鼠離開態。

我們可以用mousedown,mousemove ,mouseup來監聽三種狀態。

當使用者點選滑鼠時：

  canvas.onmousedown = function (a) {
                var x = a.clientX;
                var y = a.clientY;
                using = true;//設定變數，標誌開始使用畫布
                if (eraserEnabled) {//如果標誌使用橡皮擦，則清除畫布內容
                    context.clearRect(x, y, 20, 20);
                }
                else {否則記錄當前滑鼠座標
                    lastPoint = {x: x, y: y}
                }
            }

當使用者滑鼠移動時：

  canvas.onmousemove = function (a) {
                var x = a.clientX;
                var y = a.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;//將當前座標作為下次移動的首座標
                }
            }

當滑鼠離開時：

  canvas.onmouseup = function (a) {
                using = false;//設定變數，標誌不使用畫板
            }

3.繪製直線

function drawLine(x1, y1, x2, y2) {
    context.beginPath();//開始移動筆觸，路徑開始
    context.moveTo(x1, y1);//其實座標
    context.lineWidth = lineWidth ;//預設線條粗細
    context.lineTo(x2, y2);//結束座標
    context.stroke();
    context.closePath();//結束筆觸，路徑結束
}

stroke()：通過線條來繪製圖形輪廓。
fill()：通過填充路徑的內容區域生成實心的圖形

4.畫筆功能

pen.onclick = function(){
    eraserEnabled = false;//設定變數，標誌不使用橡皮擦
    pen.classList.add(`active`);//設定畫板上畫筆按鈕的樣式變化
    eraser.classList.remove(`active`);//設定畫板上橡皮擦按鈕的樣式變化

}

5.橡皮擦功能

eraser.onclick = function(){
    eraserEnabled = true;//標誌使用橡皮擦
    eraser.classList.add(`active`);//設定畫板上橡皮擦按鈕的樣式變化
    pen.classList.remove(`active`);//設定畫板上畫筆按鈕的樣式變化
}

6.一鍵清除功能

clear.onclick = function(){
    context.clearRect(0,0,canvas.width,canvas.height);
}

這裡使用了clearRect(x, y, width, height)方法，清除指定矩形區域，讓清除部分完全透明。x,y座標為其實座標，width, height為清除矩形區域的大小。

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`);該方法返回一個png格式的圖片展示的url，當使用者點選畫板上的下載按鈕，在html中插入一個a標籤，a.download指向畫布的上下文,download 屬性規定被下載的超連結目標。

三.手機適配的畫板

1.新增meta標籤:

因為瀏覽器初始會將頁面現在手機端顯示時進行縮放，因此我們可以在meta標籤中設定meta viewport屬性，告訴瀏覽器不將頁面進行縮放，頁面寬度=使用者裝置螢幕寬度

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2.移動端監聽滑鼠事件的方法與pc端不同

當滑鼠點選時用ontouchstart方法監聽：

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

當滑鼠移動是用ontouchmove方法監聽：

 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;

            }
        }

當滑鼠離開時用ontouchend方法監聽：

 canvas.ontouchhend = function(a){

            using = false;
        }

相關文章