canvas簡(jiǎn)易畫布

今天學(xué)習(xí)了canvas，利用它做了一個(gè)簡(jiǎn)易版的畫板，校驗(yàn)自己所學(xué)的知識(shí)，分享出來以供大家學(xué)習(xí)指教。先上效果圖。




























主要是使用了canvas的stroke和clearReact來實(shí)現(xiàn)畫板的繪畫和橡皮擦功能，然后通過監(jiān)聽鼠標(biāo)的按下、移動(dòng)、彈起事件，完成繪畫及擦除功能。直接上才藝代碼

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' //點(diǎn)擊的按鈕樣式置為active
        num = this.index //更改狀態(tài)
    }
}

oC.onmousedown = function (e) {
    var x = e.pageX - oC.offsetLeft; //獲取坐標(biāo)x值
    var y = e.pageY - oC.offsetTop; //獲取坐標(biāo)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();
    }
}

 

關(guān)鍵點(diǎn)分析：
1、監(jiān)聽鼠標(biāo)事件

通過onmousedown、onmousemove及onmouseup分別監(jiān)聽鼠標(biāo)的按下、移動(dòng)及彈起事件，并且在其回調(diào)函數(shù)中進(jìn)行相關(guān)的處理
2、畫圖功能

通過canvas的stroke方法進(jìn)行繪圖，但是繪圖之前我們需要先設(shè)置相應(yīng)的坐標(biāo)。首先是起點(diǎn)，起點(diǎn)很簡(jiǎn)單，就是鼠標(biāo)按下的坐標(biāo)，可以通過pageX和pageY獲取到鼠標(biāo)在頁面中的坐標(biāo)，再減去畫布在頁面中的偏移值，則得到鼠標(biāo)按下時(shí)在畫布中的位置，也就是起點(diǎn)，通過moveTo方法定義。而終點(diǎn)坐標(biāo)類似，只是需要在鼠標(biāo)移動(dòng)事件中獲取鼠標(biāo)的坐標(biāo)即終點(diǎn)，通過lineTo方法定義。最后通過stroke方法繪制。

為了避免多次繪制互相影響，我們可以通過canvas的beginPath和closePath形成一個(gè)閉合的互不影響的繪制。
3、橡皮擦功能

橡皮擦功能和畫圖功能類似，獲取坐標(biāo)的方法一模一樣，只是最后調(diào)用的方法是clearRect,清除畫布的內(nèi)容。
 


歡迎關(guān)注微信公眾號(hào):猴哥說前端