国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

oogh / 3660人閱讀

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

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

一.canvas標(biāo)簽

1.canvas標(biāo)簽與img標(biāo)簽相似,但是canvas標(biāo)簽是一個(gè)閉合標(biāo)簽,并且沒有src alt屬性
2.canvas標(biāo)簽有兩個(gè)屬性,width,height。我們?cè)陧撁嫔嫌胏anvas繪制一個(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)離開態(tài)。

我們可以用mousedown,mousemove ,mouseup來監(jiān)聽三種狀態(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)志開始使用畫布
                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{//如果沒有使用橡皮擦
                    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)離開時(shí):

  canvas.onmouseup = function (a) {
                using = false;//設(shè)置變量,標(biāo)志不使用畫板
            }
3.繪制直線
function drawLine(x1, y1, x2, y2) {
    context.beginPath();//開始移動(dòng)筆觸,路徑開始
    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():通過線條來繪制圖形輪廓。
fill():通過填充路徑的內(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ì)將頁面現(xiàn)在手機(jī)端顯示時(shí)進(jìn)行縮放,因此我們可以在meta標(biāo)簽中設(shè)置meta viewport屬性,告訴瀏覽器不將頁面進(jìn)行縮放,頁面寬度=用戶設(shè)備屏幕寬度

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

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

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)聽:

 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)離開時(shí)用ontouchend方法監(jiān)聽:

 canvas.ontouchhend = function(a){

            using = false;
        }

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

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

相關(guān)文章

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

    摘要:方法可以獲取到上下文二制作畫板畫板功能可以繪制不同顏色和粗細(xì)的線條,畫板上有橡皮擦功能,一鍵清除功能,下載功能。我們可以用來監(jiān)聽三種狀態(tài)。 學(xué)習(xí)制作畫板之前,我們先來了解一下canvas標(biāo)簽 一.canvas標(biāo)簽 1.canvas標(biāo)簽與img標(biāo)簽相似,但是canvas標(biāo)簽是一個(gè)閉合標(biāo)簽,并且沒有src alt屬性2.canvas標(biāo)簽有兩個(gè)屬性,width,height。我們?cè)陧撁嫔嫌胏...

    ernest.wang 評(píng)論0 收藏0
  • 手機(jī)端寫字板、畫板vue組件

    摘要:一個(gè)簡單的寫字板畫板組件由于項(xiàng)目需求目前只提供清空功能代碼及使用引入組件使用組件,可以放在一個(gè)自定義樣式的中屏兼容畫布大小放大倍數(shù),筆觸顏色筆觸寬度,筆觸陰影大小,清空自定義清空按鈕,調(diào)用組件方法清空畫布開發(fā)筆記需要兼容屏一倍圖模糊 一個(gè)簡單的canvas寫字板、畫板vue組件,由于項(xiàng)目需求目前只提供清空功能代碼及demo 使用 1.引入組件 import draw from ./in...

    mengera88 評(píng)論0 收藏0
  • 【題目】【8天】canvas畫板

    摘要:和監(jiān)聽用戶是否在繪畫。再繪畫不在繪畫。監(jiān)測用戶是在使用橡皮檫,是在使用橡皮擦,停止使用鉛筆。使用,會(huì)變?yōu)槭褂茫竺鏁?huì)增加一個(gè)屬性值。的作用是獲取寬度也就是寬度移動(dòng)端支持多點(diǎn)觸控,所以要獲取需要加上,表示第一個(gè)值 canvas畫板,比較簡易,目前還有很多bug1、手機(jī)端上下會(huì)晃動(dòng)2、下載按鈕微信上沒法用3、下載后背景色是透明4、切換成橡皮擦后,需要先點(diǎn)鉛筆才能繪畫,不能直接點(diǎn)顏色 ...

    Xufc 評(píng)論0 收藏0
  • 【web前端】花瓣畫板分類歸檔查看工具

    摘要:花瓣是國內(nèi)最大的圖片分享網(wǎng)站,部分用戶長期以來都有對(duì)個(gè)人主頁的畫板按字母順序進(jìn)行歸檔的需求,但花瓣官方一直沒有支持這個(gè)能力。 花瓣是國內(nèi)最大的圖片分享網(wǎng)站,部分用戶長期以來都有對(duì)個(gè)人主頁的畫板按字母順序進(jìn)行歸檔的需求,但花瓣官方一直沒有支持這個(gè)能力。 最近寫了個(gè)油猴腳本用于按字母順序歸檔主頁畫板。 僅供學(xué)習(xí)交流。 效果演示 showImg(https://segmentfault.co...

    mochixuan 評(píng)論0 收藏0
  • 使用Canvas和JavaScript做一個(gè)畫板

    摘要:本文同步于個(gè)人博客前些天學(xué)習(xí)了的元素,今天就來實(shí)踐一下,用做一個(gè)畫板。實(shí)現(xiàn)一個(gè)簡單的畫板實(shí)現(xiàn)思路監(jiān)聽鼠標(biāo)事件,用方法把記錄的數(shù)據(jù)畫出來。為時(shí),移動(dòng)鼠標(biāo)使用剪裁擦除畫布。 本文同步于個(gè)人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天學(xué)習(xí)了HTML5的元素,今天就來實(shí)踐一下,用canvas做一個(gè)畫板。 showImg(ht...

    asce1885 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<