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

標籤：tca   使用   draw   com   close   define   arm   UNC   設定   

建立一個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.clientWidthvar pageHeight = document.documentElement.clientHeightcanvas.width = pageWidthcanvas.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 = falseeraser.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 = falseeraser.onclick = function() {    eraserEnabled = true    action.className = "action x"}brush.onclick = function() {    eraserEnabled = false    action.className = "action"}

我們的canvas的準系統都已經實現了！

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

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