萬(wàn)圣節(jié)到了泞莉，寫(xiě)一個(gè)小例子了解一下canvas畫(huà)圖方法并扇。
canvas可以實(shí)現(xiàn)一些有趣的效果，動(dòng)畫(huà)實(shí)現(xiàn)寞秃。以一個(gè)簡(jiǎn)單的頁(yè)面實(shí)現(xiàn)了解一下基礎(chǔ)的畫(huà)圖方法。
效果
預(yù)備知識(shí)
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
開(kāi)始路徑
context.beginPath();
beginPath()方法在畫(huà)布上開(kāi)始一條繪制路徑单芜，或重置當(dāng)前的路徑蜕该。
移動(dòng)路徑
context.moveTo();
moveTo()方法把路徑移動(dòng)到畫(huà)布中指定點(diǎn)，不創(chuàng)建線條洲鸠。
添加線條
context.lineTo();
lineTo()方法添加一個(gè)新點(diǎn)堂淡，在畫(huà)布中創(chuàng)建該點(diǎn)到指定點(diǎn)的線條馋缅。
畫(huà)圖drawImage
context.drawImage(image,x,y);
drawImage()方法可以在畫(huà)布上繪制圖像、畫(huà)布或視頻绢淀，也可以繪制圖像的某些部分萤悴，增加／減少圖像的尺寸。
獲取像素?cái)?shù)據(jù)
context.getImageData(x,y,width,height);
getImageData()方法可以獲取畫(huà)布imageData對(duì)象皆的，該對(duì)象指定了矩形的像素?cái)?shù)據(jù)覆履。
在imageData對(duì)象中每個(gè)像素都存在rgba值，以數(shù)組形式存儲(chǔ)在data屬性中费薄。
放回像素?cái)?shù)據(jù)
context.putImageData(imageData,x,y);
putImageData()方法將獲取的圖像數(shù)據(jù)放回到畫(huà)布上硝全。
實(shí)現(xiàn)
html
<canvas id="canvas"></canvas>
<button id="click" class="switch">Click</button>
css
html,
body,
canvas {
width: 100%;
height: 100%;
margin: 0;
}
.switch {
position: absolute;
top: 70%;
right: 10%;
width: 50px;
height: 50px;
border-radius: 50px;
outline: none;
cursor: pointer;
animation: switch-animate alternate infinite ease 1s 0s;
}
@keyframes switch-animate {
from {
box-shadow: 0 0 30px #ece9c5;
}
to {
box-shadow: 0 0 100px #eae5a7;
}
}
js
(function () {
class Halloween {
constructor(id) {
this.canvas = document.getElementById(id);
this.ctx = this.canvas.getContext('2d');
this.w = this.canvas.width;
this.h = this.canvas.height;
this.data = [];
}
//初始畫(huà)布
initDraw(img) {
this.w = this.canvas.width = img.width;
this.h = this.canvas.height = img.height;
this.ctx.drawImage(img, 0, 0);
this.data = this.ctx.getImageData(0, 0, this.w, this.h);
}
//顯示文字
drawText() {
this.ctx.font = '60px Verdana';
this.ctx.fillStyle = '#ffffff';
this.ctx.fillText('萬(wàn)圣節(jié)快樂(lè)', 350, 280);
}
//閃電
lightning() {
let ctx = this.ctx;
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(800, 10);
ctx.lineTo(600, 100);
ctx.lineTo(500, 200);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(600, 100);
ctx.lineTo(650, 170);
ctx.stroke()
}
//打雷
thunder() {
let timer = Math.floor(800 * Math.random());
this.reverse();
this.lightning();
this.drawText();
setTimeout(() => {
this.reset();
}, timer);
}
//反轉(zhuǎn)畫(huà)布
reverse() {
let imgData = this.ctx.getImageData(0, 0, this.w, this.h);
for (var i = 0, len = imgData.data.length; i < len; i += 4) {
imgData.data[i] = 255 - imgData.data[i];
imgData.data[i + 1] = 255 - imgData.data[i + 1];
imgData.data[i + 2] = 255 - imgData.data[i + 2];
imgData.data[i + 3] = 255;
}
this.ctx.putImageData(imgData, 0, 0);
}
//重置畫(huà)布
reset() {
this.ctx.putImageData(this.data, 0, 0);
}
}
let halloween = new Halloween('canvas');
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let img = new Image();
img.src = '/images/halloween.png';
img.onload = () => {
halloween.initDraw(img);
}
document.getElementById('click').onclick = () => {
halloween.thunder();
}
})();
總結(jié)
萬(wàn)圣節(jié)快樂(lè)??
