> 脚本语言 > >

万圣节动画：canvas像素点 2017-10-31 15:06　出处：清屏网　人气：　

万圣节到了，写一个小例子了解一下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(); } })();

分享给小伙伴们：

本文标签： canvas，万圣节，动画/">canvas，万圣节，动画

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻