未加星标

HTML5 Canvas Floating Hearts

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript">

var nbOfParticles = 50;

window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); var c = document.getElementById('canvas'); var ctx = c.getContext('2d');

var w = window.innerWidth; var h = window.innerHeight;

c.width = w; c.height = h;

var paramX = 0; var paramY = 0; var rad = (Math.PI / 180);

var mouseX = 0; var mouseY = 0;

var particles = [];

document.addEventListener('click', function(e){ mouseX = e.clientX || e.pageX; mouseY = e.clientY || e.pageY console.log(paramX);

particles.push(new createParticle); }, false);

for(i = 0; i < nbOfParticles; i++) { setTimeout(function(){ mouseX = Math.random() * c.width; //first creation: random x mouseY = Math.random() * c.height; //first creation: random y

particles.push(new createParticle);

}, i * 15); }

function createParticle() {

this.x = mouseX; this.y = mouseY ; this.r = Math.floor(Math.random() * 30) + 5; //size - rad this.a = -90; //angle this.vy = Math.floor(Math.random() * 5) + 2; //velocity y var color1 = '#e6e8fa'; var color2 = '#f1c5cf'; var color3 = '#13e3cf'; var array = [color1, color2, color3]; this.color = array[Math.floor(Math.random() * 3)]; //one of the three colors this.life = Math.random() * 30;

}

function drawParticles() { requestAnimFrame(drawParticles); ctx.clearRect(0,0,w,h); ctx.fillStyle = "#e3f2f1"; ctx.fillRect(0,0, w, h);

for(t = 0; t < particles.length; t++) { var p = particles[t]; ctx.beginPath(); ctx.fillStyle = p.color; var x1 = p.x + p.r * Math.cos(p.a * rad); var y1 = p.y + p.r * Math.sin(p.a * rad); var cx1 = p.x + p.r * Math.cos((p.a + 22.5) * rad); var cy1 = p.y + p.r * Math.sin((p.a + 22.5) * rad); var cx2 = p.x + p.r * Math.cos((p.a - 22.5) * rad); var cy2 = p.y + p.r * Math.sin((p.a - 22.5) * rad); var chord = 2 * p.r * Math.sin(22.5 * rad / 2); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.arc(cx1, cy1, chord, (270 + p.a) * rad, (270 + p.a + 225) * rad); ctx.lineTo(p.x, p.y); ctx.moveTo(x1, y1); ctx.arc(cx2, cy2, chord, (90 + p.a) * rad, (90 + p.a + 135) * rad, true); ctx.lineTo(p.x, p.y); ctx.fill(); p.y-=p.vy; p.life*=0.8;

}

}

drawParticles();

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLHTML5
分页:12
转载请注明
本文标题:HTML5 Canvas Floating Hearts
本站链接:http://www.codesec.net/view/532870.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(34)