學習製作畫板之前,我們先來了解一下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屬性,告訴瀏覽器不將頁面進行縮放,頁面寬度=使用者裝置螢幕寬度
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
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;
}