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-color: #87CEEB;
 }
 </style>
</head>
<body>
 <canvas id="myCanvas" width="1000" height="600">您的浏览器不支持Canvas元素</canvas>
 <script type="text/javascript">
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var practicles = [];
 for (var i = 0; i < 500; i++) {//循环生成500粒
 practicles.push({
 x: Math.random()*(window.innerWidth),
 y: Math.random()*(window.innerHeight),
 vx: Math.random()-0.5,
 vy: Math.random()+0.5,
 size: Math.random()*3+1,
 color: "#FFF"
 })
 }
 function timeUpdate(){
 context.clearRect(0,0,window.innerWidth,window.innerHeight);//清除画布区域
 var practicle;
 for (var i = 0; i < 500; i++) {
 var practicle = practicles[i];
 practicle.x += practicles[i].vx;
 practicle.y += practicles[i].vy;
 if (practicle.x<0) {practicle.x=window.innerWidth}
 if (practicle.x>window.innerWidth) {practicle.x=0}
 if (practicle.y>window.innerHeight) {practicle.y=0}
 context.beginPath();
 context.arc(practicle.x,practicle.y,practicle.size,0,Math.PI*2)
 context.closePath();
 context.fillStyle = practicle.color;
 context.fill();
 }
 }
 setInterval(timeUpdate,40);
 </script>
</body>
</html>

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

赞 (0)

相关推荐

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

  • Canvas实现动态的雪花效果

    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

  • JavaScript canvas实现动态点线效果

    JavaScript canvas实现动态点线效果

    本文实例为大家分享了JavaScript canvas实现动态点线效果的具体代码,供大家参考,具体内容如下 效果预览 1.实现效果 画彩色点 相近的点产生连线 点线运动,遇到边界反弹 选中点,可拖动点改变位置* 2.具体实现 初始化相关变量 var c = document.getElementById("myCanvas"); //设置canvas大小 c.height = document.body.offsetHeight; c.width = document.body.off

  • canvas实现动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 静态小球 首先,生成随机半径.随机位置的50个静态小球 <button id="btn">按钮</button> <canvas id="canvas" width="500" height="300" style=&quo

  • JS+canvas绘制的动态机械表动画效果

    JS+canvas绘制的动态机械表动画效果

    本文实例讲述了JS+canvas绘制的动态机械表动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas时钟</title> <style> canvas { border: 1px

  • JS+Canvas绘制动态时钟效果

    本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #

  • JavaScript Canvas绘制动态线框效果

    JavaScript Canvas绘制动态线框效果

    本文实例为大家分享了JavaScript Canvas绘制动态线框效果的具体代码,供大家参考,具体内容如下 本周项目,移动端页面开发,要求丰富的动效,主要技术实现 Canvas :其中绘制动态线框,走了点弯路,所谓的弯路是逻辑问题,非技术实现方式. 一.涉及技术点,具体如下: 1.html 中引入canvas 标签,设置宽高: <canvas id="canvas" width=xx height=xx>您的浏览器不支持canvas,请更换版本</canvas>

  • Android如何用自定义View实现雪花效果

    Android如何用自定义View实现雪花效果

    效果图 1.SnowView 类 package com.ilz.rocketapplication.handaccount.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.G

  • JavaScript实现外溢动态爱心的效果的示例代码

    JavaScript实现外溢动态爱心的效果的示例代码

    还在为节日送女朋友什么礼物而烦恼吗?最近用JavaScript制作了一个外溢动态爱心的效果,还可以在爱心上填写你想要的文字!快学习一下给自己女朋友也diy一个吧 效果演示 源码介绍 ( function() { var b=0; var c=["ms","moz","webkit","o"]; for(var a=0;a<c.length&&!window.requestAnimationFrame;++

  • jQuery动态星级评分效果实现方法

    jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现星级评分,你需要动态程序配合,如ASP/PHP等,以便将评分值存入数据库. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

  • jQuery文本框得到与失去焦点动态改变样式效果

    jQuery文本框得到与失去焦点动态改变样式效果

    本文实例讲述了jQuery文本框得到与失去焦点动态改变样式效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { font: nor

随机推荐