canvas簡易畫布

今天學習了canvas，利用它做了一個簡易版的畫板，校驗自己所學的知識，分享出來以供大家學習指教。先上效果圖。

主要是使用了canvas的stroke和clearReact來實現畫板的繪畫和橡皮擦功能，然後通過監聽鼠標的按下、移動、彈起事件，完成繪畫及擦除功能。直接上才藝代碼

html:

<input type="button" value="畫筆" class="active" />
<input type="button" value="橡皮擦" /><br />
<canvas id="c1" width="600" height="600">在這裏的代碼看不到，不支持canvas的瀏覽器可以看到</canvas>

---

css：

body {
    background-color: black;
}

#c1 {
    background-color: #fff;
}

.active {
    background-color: red;
}

---

javascript:

var oC = document.getElementById('c1') //獲取canvas容器
var ctx = oC.getContext('2d') //生成畫筆
var num = 0; //通過num的值，判斷是畫筆還是橡皮擦
var aInput = document.getElementsByTagName('input'); //獲取按鈕dom元素

for (var i = 0; i < aInput.length; i++) {
    aInput[i].index = i //給dom元素添加自定義屬性
    aInput[i].onclick = function () {
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].className = '' //將class清空
        }
        this.className = 'active' //點擊的按鈕樣式置爲active
        num = this.index //更改狀態
    }
}

oC.onmousedown = function (e) {
    var x = e.pageX - oC.offsetLeft; //獲取座標x值
    var y = e.pageY - oC.offsetTop; //獲取座標y值
    ctx.beginPath();
    ctx.moveTo(x, y)
    oC.onmousemove = function (e) {
        var x = e.pageX - oC.offsetLeft;
        var y = e.pageY - oC.offsetTop;
        if (num == 0) {
            ctx.lineTo(x, y);
            ctx.stroke();
        } else if (num == 1) {
            ctx.clearRect(x, y, 20, 20)
        }
    }
    oC.onmouseup = function (e) {
        oC.onmousemove = null;
        oC.onmouseup = null;
        ctx.closePath();
    }
}

---

關鍵點分析：

1、監聽鼠標事件

通過onmousedown、onmousemove及onmouseup分別監聽鼠標的按下、移動及彈起事件，並且在其回調函數中進行相關的處理

2、畫圖功能

通過canvas的stroke方法進行繪圖，但是繪圖之前我們需要先設置相應的座標。首先是起點，起點很簡單，就是鼠標按下的座標，可以通過pageX和pageY獲取到鼠標在頁面中的座標，再減去畫布在頁面中的偏移值，則得到鼠標按下時在畫布中的位置，也就是起點，通過moveTo方法定義。而終點座標類似，只是需要在鼠標移動事件中獲取鼠標的座標即終點，通過lineTo方法定義。最後通過stroke方法繪製。

爲了避免多次繪製互相影響，我們可以通過canvas的beginPath和closePath形成一個閉合的互不影響的繪製。

3、橡皮擦功能

橡皮擦功能和畫圖功能類似，獲取座標的方法一模一樣，只是最後調用的方法是clearRect,清除畫布的內容。