2020-5-3 seo達(dá)人
Canvas 是 HTML5 提供的一個(gè)用于展示繪圖效果的標(biāo)簽. Canvas 原意為畫布, 在 HTML 頁面中用于展示繪圖效果. 最早 Canvas 是蘋果提出的一個(gè)方案, 今天已經(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 對(duì)象提供了各種繪圖用的 api。
var cas = document.querySelector('canvas')
3、通過 cas 獲取上下文對(duì)象(畫布對(duì)象!)
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 繪制線段偏移量.
封裝一個(gè)畫矩形的方法
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) 繪制一個(gè)空心以(x,y)為起點(diǎn)寬高分別為 width、height 的矩形
clearRect( x, y , width , height ) 清除以(x,y)為起點(diǎn)寬高分別為 width、height 的矩形 為透明
繪制圓弧
繪制圓弧的方法有
CanvasRenderingContext2D.arc()
CanvasRenderingContext2D.arcTo()
6 個(gè)參數(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))
// 自動(dòng)連回原點(diǎn)
ctx.closePath()
ctx.stroke()
function degToArc(num) {
return (Math.PI / 180) * num
}
制作畫筆
聲明一個(gè)變量作為標(biāo)識(shí)
鼠標(biāo)按下的時(shí)候，記錄起點(diǎn)位置
鼠標(biāo)移動(dòng)的時(shí)候，開始描繪并連線
鼠標(biāo)抬起的時(shí)候，關(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)移動(dòng)事件
cas.addEventListener('mousemove', function (e) {
if (!isDraw) {
// 沒有按下
return
}
// 獲取相對(duì)于容器內(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
})
手動(dòng)涂擦
原理和畫布相似，只不過用的是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è)置獎(jiǎng)品和畫布，將畫布置于圖片上方蓋住，
隨機(jī)設(shè)置生成獎(jiǎng)品。
當(dāng)手觸摸移動(dòng)的時(shí)候，可以擦除部分畫布，露出獎(jiǎ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')
// 加一個(gè)遮罩層
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，請(qǐng)查看 github.com/Michael-lzg…
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.sdgs6788.com