万圣节动画-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();
    }

})();

总结

万圣节快乐😄

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 10,399评论 1 4
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,597评论 2 32
  • 线条样式 绘制直线,第五章知识简单回顾 lineWidth 设置或返回当前的线条宽度,单位为像素 lineCap ...
    Zd_silent阅读 441评论 0 0
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,849评论 3 40
  • 书中代码示例效果展示:Core HTML5 Canvas Examples 基础知识 canvas元素 canva...
    szu_bee阅读 2,692评论 2 28