H5炫酷特效系列1——canvas满屏幕变换爱心示例
2017-07-29 12:59
323 查看
啥都不说,先上效果图,同志们觉得满意就继续看,不中意直接过。
效果为满屏幕的红心到处乱窜,红心自动变换大小和透明度,代码也不多,同志们直接复制就可以运行查看。
效果为满屏幕的红心到处乱窜,红心自动变换大小和透明度,代码也不多,同志们直接复制就可以运行查看。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>满屏幕红心</title> <style type="text/css"> body{ margin: 0; overflow: hidden; background: #303035; } </style> </head> <body> <canvas></canvas> <div id="container" class="container"></div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script> <script type="text/javascript"> var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); var ww = window.innerWidth; var wh = window.innerHeight; var hearts = []; function init(){ requestAnimationFrame(render); canvas.width = ww; canvas.height = wh; for(var i = 0; i < 100; i++){ hearts.push(new Heart()); } } function Heart() { this.x = Math.random() * ww; this.y = Math.random() * wh; this.opacity = (Math.random() * 0.5) + 0.5; this.vel = { x: (Math.random() - 0.5) * 4, y: (Math.random() - 0.5) * 4 }; this.targetScale = (Math.random() * 0.15) + 0.02; this.scale = this.targetScale * Math.random(); } Heart.prototype.update = function(){ this.x += this.vel.x; this.y += this.vel.y; this.scale += (this.targetScale - this.scale) * 0.01; if(this.x - this.width > ww || this.x + this.width < 0){ this.scale = 0; this.x = Math.random() * ww; } if(this.y - this.height > wh || this.y + this.height < 0){ this.scale = 0; this.y = Math.random() * wh; } this.width = 473.8 * this.scale; this.height = 408.6 * this.scale; } Heart.prototype.draw = function(){ ctx.globalAlpha = this.opacity; ctx.drawImage(heartImage, this.x - this.width * 0.5, this.y - this.height * 0.5,this.width, this.height); } function render(){ ctx.clearRect(0, 0, ww, wh); // ctx.globalAlpha = 1; // ctx.fillStyle = "rgba(255,255,255,0.3)"; // ctx.fillRect(0, 0, ww, wh); for(var i=0; i<100; i++){ hearts[i].update(); hearts[i].draw(); } requestAnimationFrame(render); } var heartImage = new Image(); heartImage.onload = init(); heartImage.src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NzMuOHB4IiBoZWlnaHQ9IjQwOC42cHgiIHZpZXdCb3g9IjAgMCA0NzMuOCA0MDguNiI+PHBhdGggZmlsbD0iI2QzMjkzMiIgZD0iTTQwNC42LDE2LjZDMzg1LjQsNi4xLDM2My41LDAsMzQwLDBjLTQxLjUsMC03OC41LDE4LjktMTAzLDQ4LjVDMjEyLjMsMTguOSwxNzUuMywwLDEzMy44LDAgYy0yMy4zLDAtNDUuMyw2LjEtNjQuNSwxNi42QzI3LjksMzkuNSwwLDgzLjQsMCwxMzMuOWMwLDE0LjQsMi40LDI4LjMsNi42LDQxLjJDMjkuNiwyNzguNCwyMzcsNDA4LjYsMjM3LDQwOC42IHMyMDcuMi0xMzAuMiwyMzAuMi0yMzMuNWM0LjMtMTIuOSw2LjYtMjYuOCw2LjYtNDEuMkM0NzMuOCw4My40LDQ0NS45LDM5LjYsNDA0LjYsMTYuNnoiLz48L3N2Zz4="; window.addEventListener("resize",function(){ ww = window.innerWidth; wh = window.innerHeight; }) </script> </body> </html>
相关文章推荐
- H5炫酷特效系列2——canvas特效-炫酷的心
- H5炫酷特效系列3——瀑布流水特效
- H5炫酷特效系列4——炫酷粒子变化特效
- HTML5 canvas炫酷棱镜效果的幻灯片特效
- H5画布canvas特效(旋转跳跃不停歇)
- HTML5 Canvas炫酷宇宙黑洞引力特效
- Unity着色器和屏幕特效开发秘籍 顶点-片元着色器实现系列-SpecularMask
- Unity着色器和屏幕特效开发秘籍 顶点-片元着色器实现系列-SimpleReflection
- h5 canvas 绘制的写轮眼特效
- Html5 Canvas 系列_绘图三(H5 ,CSS3 动态八卦图)
- 7款炫酷的HTML5 Canvas动画特效
- Unity着色器和屏幕特效开发秘籍 顶点-片元着色器实现系列-Phong
- 【H5】Canvas 如何自适应屏幕大小
- Unity着色器和屏幕特效开发秘籍 顶点-片元着色器实现系列-BRDFDiffuse
- canvas实现粒子线条炫酷特效
- Html5 Canvas 系列_绘图三(H5 拖放组件)
- Unity着色器和屏幕特效开发秘籍 顶点-片元着色器实现系列-BasicDiffuse
- 纯JavaScript实现HTML5 Canvas六种特效滤镜示例
- 几个H5炫酷特效
- Unity着色器和屏幕特效开发秘籍 顶点-片元着色器实现系列-AnimatedSprite