Canvas畫板---手機上也可以用的畫板

ernest.wang 發布于2019-08-29 14:14 / 837人閱讀

摘要：方法可以獲取到上下文二制作畫板畫板功能可以繪制不同顏色和粗細的線條，畫板上有橡皮擦功能，一鍵清除功能，下載功能。我們可以用來監聽三種狀態。

學習制作畫板之前，我們先來了解一下canvas標簽

一.canvas標簽

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

二.制作畫板

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

1.首先我們需要繪制一個自適應屏幕寬度的畫布。

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

        canvas.width = pageWidth
        canvas.height = pageHeight
    }

2.當用戶在畫板上繪畫時有三種狀態，鼠標點擊態，鼠標移動態，鼠標離開態。

我們可以用mousedown,mousemove ,mouseup來監聽三種狀態。

當用戶點擊鼠標時：

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

當用戶鼠標移動時：

  canvas.onmousemove = function (a) {
                var x = a.clientX;
                var y = a.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;//將當前坐標作為下次移動的首坐標
                }
            }

當鼠標離開時：

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

3.繪制直線

function drawLine(x1, y1, x2, y2) {
    context.beginPath();//開始移動筆觸，路徑開始
    context.moveTo(x1, y1);//其實坐標
    context.lineWidth = lineWidth ;//默認線條粗細
    context.lineTo(x2, y2);//結束坐標
    context.stroke();
    context.closePath();//結束筆觸，路徑結束
}

stroke()：通過線條來繪制圖形輪廓。
fill()：通過填充路徑的內容區域生成實心的圖形

4.畫筆功能

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

}

5.橡皮擦功能

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

6.一鍵清除功能

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

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

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

三.手機適配的畫板 1.添加meta標簽:

因為瀏覽器初始會將頁面現在手機端顯示時進行縮放，因此我們可以在meta標簽中設置meta viewport屬性，告訴瀏覽器不將頁面進行縮放，頁面寬度=用戶設備屏幕寬度

2.移動端監聽鼠標事件的方法與pc端不同

當鼠標點擊時用ontouchstart方法監聽：

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

當鼠標移動是用ontouchmove方法監聽：

 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;

            }
        }

當鼠標離開時用ontouchend方法監聽：

 canvas.ontouchhend = function(a){

            using = false;
        }

云服務器 GPU云服務器畫板尺寸繪畫板畫板 JS畫板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113010.html

Canvas畫板---手機上也可以用的畫板

摘要：方法可以獲取到上下文二制作畫板畫板功能可以繪制不同顏色和粗細的線條，畫板上有橡皮擦功能，一鍵清除功能，下載功能。我們可以用來監聽三種狀態。學習制作畫板之前，我們先來了解一下canvas標簽一.canvas標簽 1.canvas標簽與img標簽相似，但是canvas標簽是一個閉合標簽，并且沒有src alt屬性2.canvas標簽有兩個屬性，width，height。我們在頁面上用c...

oogh 2019-08-22 13:51 評論0 收藏0
手機端寫字板、畫板vue組件

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

mengera88 2019-08-26 13:27 評論0 收藏0
【題目】【8天】canvas畫板

摘要：和監聽用戶是否在繪畫。再繪畫不在繪畫。監測用戶是在使用橡皮檫，是在使用橡皮擦，停止使用鉛筆。使用，會變為使用，后面會增加一個屬性值。的作用是獲取寬度也就是寬度移動端支持多點觸控，所以要獲取需要加上，表示第一個值 canvas畫板，比較簡易，目前還有很多bug1、手機端上下會晃動2、下載按鈕微信上沒法用3、下載后背景色是透明4、切換成橡皮擦后，需要先點鉛筆才能繪畫，不能直接點顏色 ...

Xufc 2019-08-22 17:09 評論0 收藏0
【web前端】花瓣畫板分類歸檔查看工具

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

mochixuan 2019-08-23 13:49 評論0 收藏0
使用Canvas和JavaScript做一個畫板

摘要：本文同步于個人博客前些天學習了的元素，今天就來實踐一下，用做一個畫板。實現一個簡單的畫板實現思路監聽鼠標事件，用方法把記錄的數據畫出來。為時，移動鼠標使用剪裁擦除畫布。本文同步于個人博客：https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天學習了HTML5的元素，今天就來實踐一下，用canvas做一個畫板。 showImg(ht...

asce1885 2019-08-22 15:25 評論0 收藏0