[JavaScript]創建一個canvas畫板-小結(1)

創建一個canvas畫板

項目鏈接：GitHub

項目預覽：Github Pages

項目描述：通過MDN提供的教程和API，創建一個擁有基本功能（包括繪畫，橡皮擦，保存等）的canvas畫板。

在教程的學習過程中，掌握canvas的基本用法，以及需要注意的一些地方。

開始創建一塊畫板

首先我們要在HTML中創建一個canvas

<canvas id="canvas" width="300" height="300"></canvas>

這樣我們就可以在頁面中創建一個寬高為300*300px的畫板了。

可是，這么一小塊畫板，可能都不夠我們畫一個小豬佩奇，我們想要畫板變得更大一點，最好是一塊全屏畫板，該怎么設置呢？

首先我們可以看一下MDN中關於canvas尺寸的說明：

<canvas> 看起來和 <img> 元素很相像，唯一的不同就是它並沒有 src 和 alt 屬性。實際上，<canvas> 標簽只有兩個屬性—— width和height。這些都是可選的，並且同樣利用 DOM properties 來設置。當沒有設置寬度和高度的時候，canvas會初始化寬度為300像素和高度為>150像素。該元素可以使用CSS來定義大小，但在繪制時圖像會伸縮以適應它的框架尺寸：如果CSS的尺寸與初始畫布的比例不一致，它會出現扭曲。

根據MDN提供的信息，我們可以知道，盡量不推薦使用CSS來直接，那么我們可以采用這個方案：用JavaScript來控制canvas的寬高

var pageWidth = document.documentElement.clientWidth
var pageHeight = document.documentElement.clientHeight
canvas.width = pageWidth
canvas.height = pageHeight

這樣就可以把canvas的尺寸設置為全屏了。
但是看起來不是很好看，我們把他優化一下，封裝成一個函數：

setCanvasSize()
function setCanvasSize(canvas) {
    function pageSize(){
        // 設置canvas的寬高為全屏
        var pageWidth = document.documentElement.clientWidth
        var pageHeight = document.documentElement.clientHeight
        canvas.width = pageWidth
        canvas.height = pageHeight
    }
    
    pageSize()
    
    // 當用戶拉伸窗口時，改變canvas的寬高
    window.onresize = function() {
        pageSize()
    }
}

畫板創建完畢，接下來：

監聽用戶的鼠標動作

首先根據教程的步驟獲得渲染上下文和它的繪畫功能

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

確定繪畫功能並把他包裝成函數

function drawLine(x1, y1, x2, y2) {
    // 開始繪畫動作  
    ctx.beginPath()
    //黃色的線
    ctx.strokeStyle = "yellow"
    // 繪畫的開始坐標
    ctx.moveTo(x1, y1)
    // 繪畫路徑的寬度
    ctx.lineWidth = 2
    // 繪畫的結束坐標
    ctx.lineTo(x2, y2)
    ctx.stroke()
    // 繪畫結束
    ctx.closePath()
}

創建一個標記，用來判斷用戶鼠標點擊狀態（如果為fales,則鼠標松開；如果為true，則鼠標按下）

var using = false

創建一個橡皮擦，點擊時觸發事件，不能繪畫，只能擦除

<button id="eraser">橡皮檫</button>

var eraserEnabled = false
eraser.onclick = function() {
    eraserEnabled = true
}

創建函數，分別監聽鼠標不同狀態，根據狀態判斷是否繪畫

listenToMouse(canvas,ctx)

function listenToMouse(canvas, ctx) {
    // 確定用戶點擊的此刻坐標
    var lastPoint = { x: undefined, y: undefined }

    // 畫圓
    function drawCir(x, y, radius) {
        ctx.beginPath()
        ctx.arc(x, y, radius, 0, 360)
        ctx.fill()
    }

    // 畫線
    function drawLine(x1, y1, x2, y2, ) {
        ctx.beginPath()
        ctx.strokeStyle = "yellow"
        ctx.moveTo(x1, y1)
        ctx.lineWidth = 2
        ctx.lineTo(x2, y2)
        ctx.stroke()
        ctx.closePath()
    }

    canvas.onmousedown = function (keyWord) {
        var x = keyWord.clientX;
        var y = keyWord.clientY;
        if (eraserEnabled) {
            using = true
            ctx.clearRect(x, y, 10, 10)
        } else {
            // 確定此刻用戶所點擊的坐標，以配合下一個點的坐標
            using = true;
            lastPoint = { x: x, y: y }
            drawCir(x, y, 2)
        }
    }
    canvas.onmousemove = function (keyWord) {

        var x = keyWord.clientX;
        var y = keyWord.clientY;

        if (eraserEnabled) {
            if (using) {
                ctx.clearRect(x, y, 10, 10)
            }
        } else {
            if (using) {
                var newPoint = { x: x, y: y }
                drawCir(x, y, 2)
                drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
                //這句話很重要
                lastPoint = newPoint
            }
        }
    }
    canvas.onmouseup = function (keyWord) {
        using = false
    }
}

畫板已經基本完成了，我們來給畫板增加一個“畫筆”按鈕，以便於用戶切換，邏輯實現也更加順滑（當用戶點擊“畫筆”可以繪畫，點擊“橡皮擦”可以擦除）

<div id="action" class="action">
    <button id="eraser">橡皮檫</button>
    <button id="brush">畫筆</button>
</div> 

//啟用橡皮擦/畫筆
var eraserEnabled = false
eraser.onclick = function() {
    eraserEnabled = true
    action.className = "action x"
}
brush.onclick = function() {
    eraserEnabled = false
    action.className = "action"
}

我們的canvas的基本功能都已經實現了！

接下來可以為他完善更多的功能。