我们新增Dark Mode(暗模式),(只是在晚上)可以改变MAC OS&Windows系统的暗模式实现切换;安卓和苹果手机是一样的。
日志随笔

HTML5 Canvas 实现动态下雪效果代码

gyue2345·2015-07-10·62 次阅读··

   2015-07-10 18:36 LJY2345    抢沙发   隐藏边栏   黑色模式    62 
   评分 0 次,平均分 0.0    抢沙发   隐藏边栏   黑色模式
[收起] 文章目录

HTML5 Canvas实现动态下雪效果,带有动态背景+雪花飘落效果,适用于圣诞下雪场景,非常不错。今天我找到一个代码,并且用在了外链网上。

以下是部分代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML5 Canvas实现动态下雪效果_cnsecer.com</title>
<link href="css/datouwang.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
<script>
$(document).ready( function() {
$("canvas.flare").let_it_snow({
windPower: 0,
speed: 0,
color: "#392F52",
size:120,
opacity: 0.00000001,
count: 40,
interaction: false
});
$("canvas.snow").let_it_snow({
windPower: 3,
speed: 1,
count: 250,
size: 0,
});
$("canvas.flake").let_it_snow({
windPower: -3,
speed: 1,
count: 20,
size: 10,
image: "images/white-snowflake.png"
});
 
});
</script>
</head>
<body>
<!-- 代码 开始 -->
<canvas width="100%" height="100%" class="flare"></canvas>
<canvas width="100%" height="100%" class="snow"></canvas>
<canvas width="100%" height="100%" class="flake"></canvas>
<!-- 代码 结束 -->
 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
 
</body>
</html>

效果图

HTML5 Canvas 实现动态下雪效果代码

 

真实效果可以访问我的LJY2345外链,查看效果。

 

 

赞赏

历史上的文章

  

除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/2015/07/html5-canvas-implements-dynamic-snow-effect-code/

博 主作者: 关注:6    粉丝:1最后编辑于:2022年9月4日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

view comments - NOTHING
🌙
😃

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL