canvas雪花代码

<html>

<head><style type="text/css"> #canvas{background:#000;} </style> </head>

<body> <canvas id="canvas"></canvas></body>
<script type="text/javascript">
window.onload=function(){
var _canvas=document.getElementById(‘canvas‘),//获取canvas容器
_ctx=_canvas.getContext(‘2d‘),//获取canvas画布
_h=window.innerHeight,//高度为窗口高度
_w=window.innerWidth,//宽度为窗口宽度
_count=50,//雪花数量
_angle=0,//下落角度
_snow=[];//雪花容器
_canvas.height=_h;
_canvas.width=_w;

for(var i=0;i<_count;i++){
_snow.push({
x:Math.random()*_w,
y:Math.random()*_h,
r:Math.random()*9+1,
d:Math.random()*_count
});
}
function _draw(){
_ctx.clearRect(0,0,_w,_h);
_ctx.beginPath();
_ctx.fillStyle="rgba(255,255,255,0.8)";
for(var i=0;i<_count;i++){
var _s=_snow[i];
_ctx.moveTo(_s.x,_s.y);
_ctx.arc(_s.x,_s.y,_s.r,0,Math.PI*2,true);
}
_ctx.fill();
_update();
}

function _update(){
_angle+=0.1;
for(var i=0;i<_count;i++){
var _s=_snow[i];
_s.y+=Math.cos(_angle+_s.d)+1+_s.r/2;
_s.x+=Math.sin(_angle)*2;

if(_s.x>_w+10 || _s.x<-10 || _s.y>_h){
if(i%3>0){
_snow[i]={x:Math.random()*_w,y:-20,r:_s.r,d:_s.d};
}else{
if(Math.sin(_angle)>0){
_snow[i]= {x: -10, y: Math.random()*_h, r: _s.r, d: _s.d};
}else{
_snow[i]= {x:_w+10, y: Math.random()*_h, r: _s.r, d: _s.d};
}
}
}

}
}
setInterval(_draw,30);
}
</script>
</html>

时间: 2024-11-06 07:25:23

canvas雪花代码的相关文章

canvas雪花效果核心代码

var ca = document.getElementById("ca"); var ctx = ca.getContext('2d'); //生成n~m之间的随机数的函数 function random(n,m){ return Math.floor(Math.random() * (m - n) + n); } //角度转弧度的函数 function toRd(angle){ return angle * Math.PI / 180; } //设置变量存储画布的最大宽高度 var

~~圣诞节到啦, canvas雪花效果, 漂亮到简直没天理啊~~

看到coding的主界面有雪花, 原来,哇,  真漂亮, 一看源代码, 哦了个去, angular写的, 压力好大, 分析分析分析分析.... 然后就写成jQ插件的样子给大家用了. 在线预览的页面是: http://1.keepu.sinaapp.com/snow/snow.html Github的代码地址是: http://sqqihao.github.io/nice-Snowing ; 上图了 后面把angular拿掉了,直接引用jQuery就好了,其实不用jQuery也行的哇, 兼容没弄哇

canvas的代码封装

(function(window,document){ var cs2d = function(selector,options){ return new cs2d.fn.init(selector,options); }; cs2d.fn = cs2d.prototype = { init : function(selector,options){ var s = this, // 父容器 dom p = cs2d.is_el(selector)?selector:document.query

HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)

看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难点分析. 我这几天刚好学习了一下,也趁着此刻有时间从需求分析.知识点.程序编写一步步给大家解剖下,要是在各位关公面前耍大刀了,可别见笑哟. 最终效果图如下: 图1 一.需求分析 1.圆形雪花 本示例中雪花形状使用圆形 2.雪花数量固定 根据图1仔细观察白色雪花数量,飘落过程中,整张图的雪花数量应该是

HTML5中的 Canvas

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

Canvas API

概述 绘图方法 图像处理方法 drawImage方法 getImageData方法,putImageData方法 toDataURL方法 save方法,restore方法 像素处理 灰度效果 复古效果 红色蒙版效果 亮度效果 反转效果 参考链接 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. <canvas id="myCanvas"

Canvas绘图方法和图像处理方法(转)

转自:http://javascript.ruanyifeng.com/htmlapi/canvas.html 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. <canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas!

用Canvas制作可以根据手势摆动的树

用Canvas制作可以根据手势摆动的树 根据工作的需要,制作一个摆动的树做为页面的背景.为了增加页面的交互性,我又为背景中的树增加了鼠标(触控)事件,使他能够根据鼠标(触控)做出相应的动作,当手指做上下或者左右滑动的时候树会跟着摆动.先看看最终效果. Step1.完成HTML页面,新建一个Tree类 完成HTML页面后新建一个Tree类用来记录树的各个属性.其中x,y为树根部的坐标值,branchLen,branchWidth分别是树枝的长度与宽度,depth为树枝的层数,canvas用来接页面

使用canvas及js简单生成验证码方法

我们在做开发的时候会经常涉及到验证码,前端的验证码需要用到HTML5中的canvas的知识点,然后再结合js来控制验证数字就可以达到验证码的效果了. 随机生成一张canvas画布 生成随机验证码 在画布中随机生成干扰线 把随机验证码放到画布上面 点击更换验证码 结构与样式: 1 <style> 2 #mycanvas{ 3 cursor: pointer;/*光标为手型*/ 4 } 5 </style> 6 </head> 7 <body> 8 <ca