万圣节动画-canvas像素点

摘要：万圣节到了，写一个小例子了解一下画图方法，可以实现一些有趣的效果，动画实现。移动路径方法把路径移动到画布中指定点，不创建线条。实现初始画布显示文字万圣节快乐闪电打雷反转画布重置画布总结万圣节快乐

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

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

万圣节快乐 ^_^

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

## 开始路径

context.beginPath();

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

context.moveTo();

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

context.lineTo();

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

context.drawImage(image,x,y);

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

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

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

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

context.putImageData(imageData,x,y);

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

Click

## 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();
    }

})();

# 总结

万圣节快乐?