Canvas 是 HTML5 提供的一個用于展示繪圖效果的標(biāo)簽. Canvas 原意為畫布, 在 HTML 頁面中用于展示繪圖效果. 最早 Canvas 是蘋果提出的一個方案, 今天已經(jīng)在大多數(shù)瀏覽器中實(shí)現(xiàn)。

canvas 的使用領(lǐng)域

游戲

大數(shù)據(jù)可視化數(shù)據(jù)

banner 廣告

多媒體

模擬仿真

遠(yuǎn)程操作

圖形編輯

判斷瀏覽器是否支持 canvas 標(biāo)簽

var canvas = document.getElementById('canvas')

if (canvas.getContext) {

console.log('你的瀏覽器支持Canvas!')

} else {

console.log('你的瀏覽器不支持Canvas!')

}

canvas 的基本用法

1、使用 canvas 標(biāo)簽, 即可在頁面中開辟一格區(qū)域，可以設(shè)置其寬高，寬高為 300 和 150

<canvas></canvas>

2、獲取 dom 元素 canvas

canvas 本身不能繪圖. 是使用 JavaScript 來完成繪圖. canvas 對象提供了各種繪圖用的 api。

var cas = document.querySelector('canvas')

3、通過 cas 獲取上下文對象(畫布對象!)

var ctx = cas.getContext('2d')

4、通過 ctx 開始畫畫（設(shè)置起點(diǎn) 設(shè)置終點(diǎn) 連線-描邊 ）

ctx.moveTo(10, 10)

ctx.lineTo(100, 100)

ctx.stroke()

繪制線條

設(shè)置開始位置: context.moveTo( x, y )

設(shè)置終點(diǎn)位置: context.lineTo( x, y )

描邊繪制: context.stroke()

填充繪制: context.fill()

閉合路徑: context.closePath()

canvas 還可以設(shè)置線條的相關(guān)屬性，如下：

CanvasRenderingContext2D.lineWidth 設(shè)置線寬.

CanvasRenderingContext2D.strokeStyle 設(shè)置線條顏色.

CanvasRenderingContext2D.lineCap 設(shè)置線末端類型，'butt'( 默認(rèn) ), 'round', 'square'.

CanvasRenderingContext2D.lineJoin 設(shè)置相交線的拐點(diǎn)， 'miter'(默認(rèn))，'round', 'bevel',

CanvasRenderingContext2D.getLineDash() 獲得線段樣式數(shù)組.

CanvasRenderingContext2D.setLineDash() 設(shè)置線段樣式.

CanvasRenderingContext2D.lineDashOffset 繪制線段偏移量.

封裝一個畫矩形的方法

function myRect(ctxTmp, x, y, w, h) {

ctxTmp.moveTo(x, y)

ctxTmp.lineTo(x + w, y)

ctxTmp.lineTo(x + w, y + h)

ctxTmp.lineTo(x, y + h)

ctxTmp.lineTo(x, y)

ctxTmp.stroke()

}

var cas = document.querySelector('canvas')

var ctx = cas.getContext('2d')

myRect(ctx, 50, 50, 200, 200)

繪制矩形

fillRect( x , y , width , height) 填充以(x,y)為起點(diǎn)寬高分別為 width、height 的矩形 默認(rèn)為黑色

stokeRect( x , y , width , height) 繪制一個空心以(x,y)為起點(diǎn)寬高分別為 width、height 的矩形

clearRect( x, y , width , height ) 清除以(x,y)為起點(diǎn)寬高分別為 width、height 的矩形 為透明

繪制圓弧

繪制圓弧的方法有

CanvasRenderingContext2D.arc()

CanvasRenderingContext2D.arcTo()

6 個參數(shù): x，y(圓心的坐標(biāo))，半徑，起始的弧度(不是角度 deg)，結(jié)束的弧度，(bool 設(shè)置方向 ! )

var cas = document.querySelector('canvas')

var ctx = cas.getContext('2d')

ctx.arc(100, 100, 100, 0, degToArc(360))

ctx.stroke()

// 角度轉(zhuǎn)弧度

function degToArc(num) {

return (Math.PI / 180) * num

}

繪制扇形

var cas = document.querySelector('canvas')

var ctx = cas.getContext('2d')

ctx.arc(300, 300, 200, degToArc(125), degToArc(300))

// 自動連回原點(diǎn)

ctx.closePath()

ctx.stroke()

function degToArc(num) {

return (Math.PI / 180) * num

}

制作畫筆

聲明一個變量作為標(biāo)識

鼠標(biāo)按下的時候，記錄起點(diǎn)位置

鼠標(biāo)移動的時候，開始描繪并連線

鼠標(biāo)抬起的時候，關(guān)閉開關(guān)

點(diǎn)擊查看效果圖

var cas = document.querySelector('canvas')

var ctx = cas.getContext('2d')

var isDraw = false

// 鼠標(biāo)按下事件

cas.addEventListener('mousedown', function () {

isDraw = true

ctx.beginPath()

})

// 鼠標(biāo)移動事件

cas.addEventListener('mousemove', function (e) {

if (!isDraw) {

// 沒有按下

return

}

// 獲取相對于容器內(nèi)的坐標(biāo)

var x = e.offsetX

var y = e.offsetY

ctx.lineTo(x, y)

ctx.stroke()

})

cas.addEventListener('mouseup', function () {

// 關(guān)閉開關(guān)了!

isDraw = false

})

手動涂擦

原理和畫布相似，只不過用的是clearRect()方法。

點(diǎn)擊查看效果圖

var cas = document.querySelector('canvas')

var ctx = cas.getContext('2d')

ctx.fillRect(0, 0, 600, 600)

// 開關(guān)

var isClear = false

cas.addEventListener('mousedown', function () {

isClear = true

})

cas.addEventListener('mousemove', function (e) {

if (!isClear) {

return

}

var x = e.offsetX

var y = e.offsetY

var w = 20

var h = 20

ctx.clearRect(x, y, w, h)

})

cas.addEventListener('mouseup', function () {

isClear = false

})

刮刮樂

首先需要設(shè)置獎品和畫布，將畫布置于圖片上方蓋住，

隨機(jī)設(shè)置生成獎品。

當(dāng)手觸摸移動的時候，可以擦除部分畫布，露出獎品區(qū)。

點(diǎn)擊查看效果圖

<div>

<img src="./images/2.jpg" alt="" />

<canvas width="600" height="600"></canvas>

</div>

css

img {

width: 600px;

height: 600px;

position: absolute;

top: 10%;

left: 30%;

}

canvas {

width: 600px;

height: 600px;

position: absolute;

top: 10%;

left: 30%;

border: 1px solid #000;

}

js

var cas = document.querySelector('canvas')

var ctx = cas.getContext('2d')

var img = document.querySelector('img')

// 加一個遮罩層

ctx.fillStyle = '#ccc'

ctx.fillRect(0, 0, cas.width, cas.height)

setImgUrl()

// 開關(guān)

var isClear = false

cas.addEventListener('mousedown', function () {

isClear = true

})

cas.addEventListener('mousemove', function (e) {

if (!isClear) {

return

}

var x = e.offsetX

var y = e.offsetY

ctx.clearRect(x, y, 30, 30)

})

cas.addEventListener('mouseup', function () {

isClear = false

})

function setImgUrl() {

var arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']

// 0-3

var random = Math.round(Math.random() * 3)

img.src = arr[random]

}

更多demo，請查看 github.com/Michael-lzg…