canvas 实现烟花效果
一:创建画布
<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>
二:实现功能
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
var timer;
var iStop = false;
var fires = [];
function draw(){
var _fires = [];
for(var i=0; i<fires.length; i++){
cxt.save();
cxt.translate(fires[i].x, fires[i].y);
for(var j=0; j<12; j++){
cxt.save();
cxt.beginPath();
cxt.strokeStyle = 'rgba('+fires[i].color+', '+(fires[i].alpha--)/1000+')';
cxt.rotate(30*j*Math.PI/180+fires[i].offset);
cxt.translate(fires[i].radius++/10, 0);
cxt.rotate(45*Math.PI/180);
cxt.moveTo(0, 0);
cxt.lineTo(10, 0);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
cxt.restore();
if(fires[i].alpha > 0){
_fires.push(fires[i])
}
}
fires = _fires;
}
function drawTip() {
cxt.save();
cxt.font="20px Verdana";
cxt.fillStyle = 'skyblue';
cxt.fillText('请单击页面!', 230, 290);
cxt.restore();
}
function erase(){
cxt.clearRect(0, 0, canvas.width, canvas.height);
}
canvas.onmousedown = function(e){
var ev = e || window.event;
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);
var offset = Math.round(Math.random()*45);
fires.push({'radius':0,'alpha':1000,'x':x,'y':y,'color':r+','+g+','+b, 'offset':offset});
};
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.cancelRequestAnimationFrame =
window.cancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame;
function animate() {
erase();
draw();
drawTip();
if(iStop){
cancelRequestAnimationFrame(timer);
}else{
timer = requestAnimationFrame(animate);
}
}
animate();
canvas 实现烟花效果的更多相关文章
- WEB烟花效果——Canvas实现
摘要 本文主要介绍一种WEB形式的烟花(fireworks)效果(图1所示),该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽 ...
- 还在用canvas画格子吗?文字烟花效果更不错噢
大家好,我是小丞同学,一名前端爱好者 欢迎访问博主的个人网站:一口奶盖 "在人间贩卖声音 等凑够满天星辰 放烟花给你看" 上次的烟花有些许平淡,这次来放大招了,让你的名字在天空绽放 ...
- Android开发——为EditText添加烟花效果的实现
)什么时候发射烟花:监听EditText的文字改变,获取文字数量的变化以确定风的方向,还有获取光标的位置确定爆炸的位置.光标的位置没有具体的方法确定坐标,要通过反射自己计算. 2. 主要实现类 库里 ...
- Canvas 放烟花合集 -- 用粉丝头像做成烟花绽放🧨
"我对着烟花许愿,希望你永远在我身边" "凑不够满天星辰那就去看看烟花吧,人间烟火气,最抚凡人心" 小tips:喜欢的可以关注博主私信代码噢~ 也可以看看前面两 ...
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果
- 『HTML5梦幻之旅』-缤纷多姿的烟花效果
天花无数月中开,五采祥云绕绛台.堕地忽惊星彩散,飞空旋作雨声来.怒撞玉斗翻晴雪,勇踏金轮起疾雷.更漏已深人渐散,闹竿挑得彩灯回. ——明·瞿佑·<烟火戏> 记得每年过春节的那段时间,除了欣 ...
- canvas实现倒计时效果示例(vue组件内编写)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- canvas/CSS仪表盘效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- maven命令的简单理解
mvn clean //在target文件夹中的一切都将被删除 mvn compile //编译源代码 mvn test //运行应用程序中的单元测试 mvn package //把jar打到本项 ...
- racktables 后期维护
一.网站与数据库分离 vim secret.php #$pdo_dsn = 'mysql:host=localhost;dbname=racktables'; #$db_username = 'roo ...
- 1、str.join() 2、fromkeys() 3、深浅拷贝 4、set()
1. 补充基础数据类型的相关知识点 1. str. join() 把列表变成字符串 2. 列表不能再循环的时候删除. 因为索引会跟着改变 3. 字典也不能直接循环删除. 把要删除的内容记录在列表中. ...
- 小服务程序(Java Servlet)
一般来说,servlet说起来挺高大上的,但是其实实际就是一个能够交互地浏览和修改页面数据,生成一个动态的Web页面. Servlet方法,页面实施请求数据,后台服务器给出响应,将数据返回到页面中去. ...
- 865. Smallest Subtree with all the Deepest Nodes 有最深节点的最小子树
[抄题]: Given a binary tree rooted at root, the depth of each node is the shortest distance to the roo ...
- ES6中的Promise使用方法与总结
在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...
- Spring Boot学习笔记2——基本使用之最佳实践[z]
前言 在上一篇文章Spring Boot 学习笔记1——初体验之3分钟启动你的Web应用已经对Spring Boot的基本体系与基本使用进行了学习,本文主要目的是更加进一步的来说明对于Spring B ...
- 引入flash
调用代码 <div class="media"> <object class="main_video_box" classid="c ...
- jquery分页插件精选
1.最新的分页控件:Mricode.Pagination(推荐) https://github.com/mricle/Mricode.Pagination 2.Jquery Pagination Pl ...
- js Map和Set
Map Map是一组键值对的结构,具有极快的查找速度.JavaScript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的.为了解决这个问题,最新的ES6 ...