Canvas畫板---手機(jī)上也可以用的畫板

oogh 發(fā)布于2019-08-22 13:51 / 3674人閱讀

摘要：方法可以獲取到上下文二制作畫板畫板功能可以繪制不同顏色和粗細(xì)的線條，畫板上有橡皮擦功能，一鍵清除功能，下載功能。我們可以用來(lái)監(jiān)聽(tīng)三種狀態(tài)。

學(xué)習(xí)制作畫板之前，我們先來(lái)了解一下canvas標(biāo)簽

一.canvas標(biāo)簽

1.canvas標(biāo)簽與img標(biāo)簽相似，但是canvas標(biāo)簽是一個(gè)閉合標(biāo)簽，并且沒(méi)有src alt屬性
2.canvas標(biāo)簽有兩個(gè)屬性，width，height。我們?cè)陧?yè)面上用canvas繪制一個(gè)畫布時(shí)，應(yīng)用width，height屬性設(shè)置大小，如果用css設(shè)置，繪制圖像時(shí)可能會(huì)出現(xiàn)扭曲。
3.渲染上下文 context
canvas起初是空白的。為了展示，首先腳本需要找到渲染上下文，然后在它的上面繪制。
getContext()方法可以獲取到上下文context.

二.制作畫板

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

1.首先我們需要繪制一個(gè)自適應(yīng)屏幕寬度的畫布。

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

        canvas.width = pageWidth
        canvas.height = pageHeight
    }

2.當(dāng)用戶在畫板上繪畫時(shí)有三種狀態(tài)，鼠標(biāo)點(diǎn)擊態(tài)，鼠標(biāo)移動(dòng)態(tài)，鼠標(biāo)離開(kāi)態(tài)。

我們可以用mousedown,mousemove ,mouseup來(lái)監(jiān)聽(tīng)三種狀態(tài)。

當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)：

  canvas.onmousedown = function (a) {
                var x = a.clientX;
                var y = a.clientY;
                using = true;//設(shè)置變量，標(biāo)志開(kāi)始使用畫布
                if (eraserEnabled) {//如果標(biāo)志使用橡皮擦，則清除畫布內(nèi)容
                    context.clearRect(x, y, 20, 20);
                }
                else {否則記錄當(dāng)前鼠標(biāo)坐標(biāo)
                    lastPoint = {x: x, y: y}
                }
            }

當(dāng)用戶鼠標(biāo)移動(dòng)時(shí)：

  canvas.onmousemove = function (a) {
                var x = a.clientX;
                var y = a.clientY;
                if (!using) {return}//判斷是否使用畫板
                if (eraserEnabled) {//如果標(biāo)志使用橡皮擦，則清除畫布內(nèi)容
                    context.clearRect(x, y, 20, 20);
                }
                else{//如果沒(méi)有使用橡皮擦
                    var newPoint = {"x": x, "y": y};//記錄鼠標(biāo)移動(dòng)到的新坐標(biāo)
                    drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y) //繪制線條
                    lastPoint = newPoint;//將當(dāng)前坐標(biāo)作為下次移動(dòng)的首坐標(biāo)
                }
            }

當(dāng)鼠標(biāo)離開(kāi)時(shí)：

  canvas.onmouseup = function (a) {
                using = false;//設(shè)置變量，標(biāo)志不使用畫板
            }

3.繪制直線

function drawLine(x1, y1, x2, y2) {
    context.beginPath();//開(kāi)始移動(dòng)筆觸，路徑開(kāi)始
    context.moveTo(x1, y1);//其實(shí)坐標(biāo)
    context.lineWidth = lineWidth ;//默認(rèn)線條粗細(xì)
    context.lineTo(x2, y2);//結(jié)束坐標(biāo)
    context.stroke();
    context.closePath();//結(jié)束筆觸，路徑結(jié)束
}

stroke()：通過(guò)線條來(lái)繪制圖形輪廓。
fill()：通過(guò)填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形

4.畫筆功能

pen.onclick = function(){
    eraserEnabled = false;//設(shè)置變量，標(biāo)志不使用橡皮擦
    pen.classList.add("active");//設(shè)置畫板上畫筆按鈕的樣式變化
    eraser.classList.remove("active");//設(shè)置畫板上橡皮擦按鈕的樣式變化

}

5.橡皮擦功能

eraser.onclick = function(){
    eraserEnabled = true;//標(biāo)志使用橡皮擦
    eraser.classList.add("active");//設(shè)置畫板上橡皮擦按鈕的樣式變化
    pen.classList.remove("active");//設(shè)置畫板上畫筆按鈕的樣式變化
}

6.一鍵清除功能

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

這里使用了clearRect(x, y, width, height)方法，清除指定矩形區(qū)域，讓清除部分完全透明。x,y坐標(biāo)為其實(shí)坐標(biāo)，width, height為清除矩形區(qū)域的大小。

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");該方法返回一個(gè)png格式的圖片展示的url，當(dāng)用戶點(diǎn)擊畫板上的下載按鈕，在html中插入一個(gè)a標(biāo)簽，a.download指向畫布的上下文,download 屬性規(guī)定被下載的超鏈接目標(biāo)。

三.手機(jī)適配的畫板 1.添加meta標(biāo)簽:

因?yàn)闉g覽器初始會(huì)將頁(yè)面現(xiàn)在手機(jī)端顯示時(shí)進(jìn)行縮放，因此我們可以在meta標(biāo)簽中設(shè)置meta viewport屬性，告訴瀏覽器不將頁(yè)面進(jìn)行縮放，頁(yè)面寬度=用戶設(shè)備屏幕寬度

2.移動(dòng)端監(jiān)聽(tīng)鼠標(biāo)事件的方法與pc端不同

當(dāng)鼠標(biāo)點(diǎn)擊時(shí)用ontouchstart方法監(jiān)聽(tīng)：

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

當(dāng)鼠標(biāo)移動(dòng)是用ontouchmove方法監(jiān)聽(tīng)：

 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;

            }
        }

當(dāng)鼠標(biāo)離開(kāi)時(shí)用ontouchend方法監(jiān)聽(tīng)：

 canvas.ontouchhend = function(a){

            using = false;
        }

GPU云服務(wù)器云服務(wù)器畫板尺寸繪畫板畫板 JS畫板

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92526.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

oogh

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

程序員的算法趣題Q19: 朋友的朋友還是朋友嗎？

閱讀 3553·2021-09-10 10:51
DogYun新上韓國(guó)獨(dú)立服務(wù)器,E5/SSD+NVMe優(yōu)惠后300元/月,自動(dòng)化上架

閱讀 2524·2021-09-07 10:26
#預(yù)售#微基主機(jī)：韓國(guó)BGP線路，1核/1G/100Mbps/月付50元，年付400元，送雙倍內(nèi)存

閱讀 2504·2021-09-03 10:41
CSS遇到的坑

閱讀 826·2019-08-30 15:56
css魔幻屬性跟進(jìn)篇

閱讀 2919·2019-08-30 14:16
前端文檔匯總（覺(jué)得對(duì)您有用的話，別忘了給點(diǎn)個(gè)贊哦 ^_^ ?。?/a>

閱讀 3508·2019-08-30 13:53

H5內(nèi)喚醒百度、高德APP

閱讀 2122·2019-08-26 13:48
關(guān)于JSON.parse()和JSON.stringify()的性能小測(cè)試

閱讀 1929·2019-08-26 13:37

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Canvas畫板---手機(jī)上也可以用的畫板

相關(guān)文章