Canvas 是 HTML5 提供的一個用于展示繪圖效果的標簽. Canvas 原意為畫布, 在 HTML 頁面中用于展示繪圖效果. 最早 Canvas 是蘋果提出的一個方案, 今天已經在大多數瀏覽器中實現。

canvas 的使用領域

游戲

大數據可視化數據

banner 廣告

多媒體

模擬仿真

遠程操作

圖形編輯

判斷瀏覽器是否支持 canvas 標簽

var canvas = document.getElementById('canvas')

if (canvas.getContext) {

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

} else {

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

}

canvas 的基本用法

1、使用 canvas 標簽, 即可在頁面中開辟一格區域，可以設置其寬高，寬高為 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 開始畫畫（設置起點 設置終點 連線-描邊 ）

ctx.moveTo(10, 10)

ctx.lineTo(100, 100)

ctx.stroke()

繪制線條

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

設置終點位置: context.lineTo( x, y )

描邊繪制: context.stroke()

填充繪制: context.fill()

閉合路徑: context.closePath()

canvas 還可以設置線條的相關屬性，如下：

CanvasRenderingContext2D.lineWidth 設置線寬.

CanvasRenderingContext2D.strokeStyle 設置線條顏色.

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

CanvasRenderingContext2D.lineJoin 設置相交線的拐點， 'miter'(默認)，'round', 'bevel',

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

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

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)為起點寬高分別為 width、height 的矩形 默認為黑色

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

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

繪制圓弧

繪制圓弧的方法有

CanvasRenderingContext2D.arc()

CanvasRenderingContext2D.arcTo()

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

var cas = document.querySelector('canvas')

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

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

ctx.stroke()

// 角度轉弧度

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

// 自動連回原點

ctx.closePath()

ctx.stroke()

function degToArc(num) {

return (Math.PI / 180) * num

}

制作畫筆

聲明一個變量作為標識

鼠標按下的時候，記錄起點位置

鼠標移動的時候，開始描繪并連線

鼠標抬起的時候，關閉開關

點擊查看效果圖

var cas = document.querySelector('canvas')

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

var isDraw = false

// 鼠標按下事件

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

isDraw = true

ctx.beginPath()

})

// 鼠標移動事件

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

if (!isDraw) {

// 沒有按下

return

}

// 獲取相對于容器內的坐標

var x = e.offsetX

var y = e.offsetY

ctx.lineTo(x, y)

ctx.stroke()

})

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

// 關閉開關了!

isDraw = false

})

手動涂擦

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

點擊查看效果圖

var cas = document.querySelector('canvas')

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

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

// 開關

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

})

刮刮樂

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

隨機設置生成獎品。

當手觸摸移動的時候，可以擦除部分畫布，露出獎品區。

點擊查看效果圖

<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()

// 開關

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…