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 maxH = ca.height;
 var maxW = ca.width;
 //每一个雪花都具有的特性
 //x,y坐标、雪花半径、角度、
 //先生成100个雪花
 var snows = [];
 for(var i=0;i<200;i++){
 snows.push({
 "left": random(0, maxW),
 "top": random(0, maxH),
 "deg": random(-20, 20), //这个是起到更新数据的作用
 "radius": random(2, 10)
 });
 }
 //将这些属性应用到每一雪花上
// for(var i=0;i<snows.length;i++) {
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var ra = ctx.createRadialGradient(x, y, r / 4, x, y, r);
// ra.addColorStop(0, "rgba(255,0,0,1)");
// ra.addColorStop(1, "rgba(255,0,0,0.1)");
// ctx.fillStyle = ra;
// ctx.beginPath();
// ctx.arc(x, y, r, 0, 2 * Math.PI);
// ctx.fill();
// }
 //如果向上面这样写的话不会有动画效果
 //要实现动画效果就要让每一个雪花的特性都变动起来
 //设置定时器,定时改变特性
 var timer = setInterval(function () {
 snow();
 //要实现动画效果首先要清除画布内容
 ctx.clearRect(0, 0, maxW, maxH);
 //每一个雪花每隔16ms需要变动的特性是
 //x、y坐标,这是需要一个新的数值来做计算,改变它们的值
 //为了避免重新定义这里直接利用snows.radius来计算
 for (var i = 0; i < snows.length; i++) {
 //一开始每一个雪花的x,y坐标和半径r
 //注意不能这样写,后面的雪花的数据会把前面的顶掉,这个bug找了好长时间
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var d = snows[i].deg;
 //y变化量
 var yChange = 0.5 * snows[i].radius;
 //x变化量 这里可以将x的变化量和y的变化量通过snows.deg关联起来,
 //从而使每一个雪花都沿着自己的轨迹走,也可以单独设定,所有的雪花轨迹一样
 var xChange = Math.tan(toRd(snows[i].deg)) * yChange; //这里的三角公式经过测试 tan 是最合适的
 snows[i].top += yChange;
 snows[i].left += xChange;
 //经过上面这些步骤每一个雪花的x,y坐标都发生了改变,随着时间的推移,
 //雪花都会飘出画布,雪花最后就没有了,这里需要作出判断,把超出画布的雪花从snows
 //里面删掉,然后再添加新的雪花,这一步在最后进行,这里只做判断
 if (snows[i].left < 0 || snows[i].left > maxW || snows[i].top > maxH) {
 //这里的x<0 是因为 xChange可能为负值
 if(i>0){
  snows.splice(i--, 1);
  continue;//如果超出范围了
  // 那这个雪花就没必要再进行后面的渲染了,所以这个判断可以降低性能消耗
 }
 }
 //开始渲染
 var ra = ctx.createRadialGradient(snows[i].left, snows[i].top, snows[i].radius / 4, snows[i].left, snows[i].top, snows[i].radius);
 ra.addColorStop(0, "rgba(255,255,255,1)");
 ra.addColorStop(1, "rgba(255,255,255,0.1)");
 ctx.fillStyle = ra;
 ctx.beginPath();
 ctx.arc(snows[i].left, snows[i].top, snows[i].radius, 0, 2 * Math.PI);
 ctx.fill();
 }
 }, 16);
 //增加雪花的数量
 //就是往snows数组中添加成员
 function snow(){
 if(snows.length<220) {
 var l = 220 - snows.length;
 for(var i=0;i<l;i++){
 snows.push({
  "left": random(0, maxW),
  "top": 0,
  "deg": random(-20, 20), //这个是起到更新数据的作用
  "radius": random(2, 10)
 })
 }
 }
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • Canvas实现动态的雪花效果

    效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas</title> <style type="text/css"> *{ margin: 0; padding: 0; } html, body{ height: 100%; } #myCanvas{ background-colo

  • 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; } //设置变量存储画

  • jQuery产品间断向下滚动效果核心代码

    核心代码如下: 复制代码 代码如下: $(function(){ var _BuyList=$("#buyList"); var Trundle = function () { _BuyList.prepend(_BuyList.find("li:last")).css('marginTop', '-85px'); _BuyList.animate({ 'marginTop': '0px' }, 800); } var setTrundle = setInterva

  • canvas绘制万花筒效果(代码分享)

    话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>万花筒</title> <style> canvas{ background:#eee; } </style> <script> window.onload = function(){ var canvas = document.getEl

  • js时钟翻牌效果实现代码分享

    先给大家上运行效果图,看看是不是特别棒! 这一张是小编抓拍时钟翻牌时的效果图: 为大家分享的JavaScript时钟翻牌效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create an Animated Flip Down Clock</title> <link rel=&quo

  • canvas 弹幕效果(实例分享)

    话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas style="width: 1280px;height: 720px;background-color: rgba(0

  • python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)

    完整代码下载:http://xiazai.jb51.net/201407/tools/python-migong.rar 最近研究了下迷宫的生成算法,然后做了个简单的在线迷宫游戏.游戏地址和对应的开源项目地址可以通过上面的链接找到.开源项目中没有包含服务端的代码,因为服务端的代码实在太简单了.下面将简单的介绍下随机迷宫的生成算法.一旦理解后你会发现这个算法到底有多简单. 1.将迷宫地图分成多个房间,每个房间都有四面墙. 2.让"人"从地图任意一点A出发,开始在迷宫里游荡.从A房间的1/

  • javascript实现圣旨卷轴展开效果(代码分享)

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jQuery 3.1.1.js"></script> <title>诏书</title> <style ty

  • Android应用中制作选中后图标变大浮动效果的代码分享

    最近在玩3g体育门户客户端的时候,看到这样个效果: 轻触赛事图标,会有一个图标变大浮出的效果.,蛮有意思的.于是就把仿照它做了一个.   这个是原图: 实际上是给图标的触摸事件中添加了一个缩放的动画,代码如下. package com.test; import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import andro

  • jquery实现拖动效果(代码分享)

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style type="text/css"> .page{text-align:left;} .dragDiv{b

  • Js保留小数点的4种效果实现代码分享

    1.将小数点清零: 复制代码 代码如下: function returnFloat0(value) {    value = Math.round(parseFloat(value));    return value;} 2.保留一位小数点: 复制代码 代码如下: function returnFloat1(value) {    value = Math.round(parseFloat(value) * 10) / 10;    if (value.toString().indexOf("

随机推荐