要过年啦，用canvas做了个烟火效果

【要过年啦，用canvas做了个烟火效果】的更多相关文章

要过年啦，用canvas做了个烟火效果

声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 要过年了,过年想到的就是放烟火啦....于是就用canvas写了个放烟火的效果,鼠标点击也会产生烟火,不过不要产生太多烟火哦,一个烟火散出的粒子是30到200个之间,当页面上的粒子数量达到一定的时候,页面就会很卡咯,我也没特意去优化神马的.以后有空再说吧. 直接上DEMO吧:放烟火原理很简单...就写一个烟火类以及碎屑类,实例化后让它飞起来,然后到达某个点后,把这个烟火对象的dead属性置为true,然后再实例化出一定数量的碎屑对象…

用HTML5 Canvas 做擦除及扩散效果

2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内实现了一个方案[下文方案一],后来继续探索之后进一步更新了这个方案[下文方案二],提高了交互的性能,也提升了用户体验.今年初的另一个项目,提出了一个比较类似的需求,不过不是擦除效果,需要在一张地图上动态显示雾霾驱散的效果,这个交互需求有个小难点,雾霾的边缘是模糊的,而不是常见的那种整齐的. 这里说明…

用 canvas 做个好玩的网站背景

不知不觉又好久没更过博客了,老调新弹一下,之前做的一个小效果,觉得蛮有意思的,也有朋友问是怎么做的,就分享一下,写个博文吧. 先上demo吧:http://whxaxes.github.io/canvas-test/src//Funny-demo/netparticle/net_1.html 上面这个demo是最早写的,后来做了点小修改后就用到了自己的网站上当个banner,有兴趣的也可以看看效果:http://wanghx.cn/ ,至少同事说还是挺酷炫的.这种效果其实很早之前就有了的,…

用Canvas做动画

之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过<Foundation ActionScript Animation>其中的数学原理被不少人转载引用,学习过AS的对这本书应该有了解.基于此,才有的这本书,HTML5版本的动画原理.哈哈,庆幸我是数学出身的~~~ 这本书上有些bug,本来做了记录,结果被当废纸扔掉了 - -!目前不能分享,只能在看…

我们能用canvas做什么？

什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. 我们能用Canvas做些什么? 1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位.HTML5在基于Web的图像显示方面比Flash更加立体.更加精巧,我认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方…

html5 canvas做的图表插件

用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Graphics一样,都可以用来绘制图形. 然后就试着用canvas做了这样一个东西. 具体实现如下,个人表达能力有问题,各位看官还是看源码吧,如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-T…

canvas做动画

一.绘制图片 ①加载图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas做动画</title> </head> <body> <canvas width="600" height="400"></canvas&…

canvas意料之外获得降龙十八掌的效果

瞎整本来是要点击编辑多张图片的,没想到弄成这样.这不是电视剧里的降龙十八掌吗特此记录留着以后用,看来canvas做游戏特效都不错啊. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body,div{ margin:0; padding:0; } #d…

使用JavaScript和Canvas打造真实的雨滴效果

使用JavaScript和Canvas打造真实的雨滴效果寸志 · 1 年前我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗更复杂的JavaScript.幸好,你们觉得它还有点意思.rainyday.js想创建一个轻量的JavaScript类库,利用HTML5的canvas,来实现雨滴在玻璃上滑落的效果.很简单,不过有时候还是很有挑战的,尤其是在我们既要尽力避免动画区别于通常JavaScript的动画,又要保证动画流畅运…

HTML5在canvas中绘制复杂形状附效果截图

HTML5在canvas中绘制复杂形状附效果截图一.绘制复杂形状或路径在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lineTo() : 从当前点绘制一条直线到点(x,y). arc(x,y,r,sAngle,eAn…