万圣节到了，写一个小例子了解一下canvas画图方法，canvas可以实现一些有趣的效果，动画实现。以一个简单的页面实现了解一下基础的画图方法。
原文链接

canvas可以实现一些有趣的效果，动画实现。以一个简单的页面实现了解一下基础的画图方法。

效果

万圣节快乐 ^_^

预备知识

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

## 开始路径

context.beginPath();

beginPath()方法在画布上开始一条绘制路径，或重置当前的路径。

移动路径

context.moveTo();

moveTo()方法把路径移动到画布中指定点，不创建线条。

添加线条

context.lineTo();

lineTo()方法添加一个新点，在画布中创建该点到指定点的线条。

画图drawImage

context.drawImage(image,x,y);

drawImage()方法可以在画布上绘制图像、画布或视频，也可以绘制图像的某些部分，增加／减少图像的尺寸。

获取像素数据

context.getImageData(x,y,width,height);

getImageData()方法可以获取画布imageData对象，该对象指定了矩形的像素数据。

在imageData对象中每个像素都存在rgba值，以数组形式存储在data属性中。

放回像素数据

context.putImageData(imageData,x,y);

putImageData()方法将获取的图像数据放回到画布上。

实现

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 = [];}//初始画布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('万圣节快乐', 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);}//反转画布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);}//重置画布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();}})();

# 总结

万圣节快乐?