首页 > 编程 > HTML > 正文

基于html5 can-vas实现漫天飞雪效果实例

2020-03-24 15:43:23
字体：大 中 小
来源：转载
供稿：网友

本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法，运行该实例可以看到很棒的下雪效果。如下图所示：

基于html5 canvas实现漫天飞雪效果实例

主要代码如下：

代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>漫天飞雪</title>

<style type="text/css">

* {margin: 0; padding: 0;}</p> <p>body {

/*You can use any kind of background here.*/

background: #6b92b9;

}

canvas {

display: block;

}

</style>

</head></p> <p><body></p> <p><div style=" background:#6b92b9; width:100%; height:2000px;" ></div>

<canvas id="canvas" style="position:fixed; top:0px;left:0px;z-index:80;pointer-events:none;"></canvas></p> <p><script>

window.onload = function(){

//canvas init

var canvas = document.getElementById("canv
破晓电影网[www.aikan.tv/special/poxiaodianyingwang/]as");

var ctx = canvas.getContext("2d");



//canvas dimensions

var W = window.innerWidth;

var H = window.innerHeight;

canvas.width = W;

canvas.height = H;



//snowflake particles

var mp = 3000; //max particles

var particles = [];

for(var i = 0; i < mp; i++)

{

particles.push({

x: Math.random()*W, //x-coordinate

y: Math.random()*H, //y-coordinate

r: Math.random()*3+1, //radius

d: Math.random()*mp //density

})

}



//Lets draw the flakes

function draw()

{

ctx.clearRect(0, 0, W, H);



ctx.fillStyle = "rgba(255, 255, 255, 0.8)";

/* ctx.fillStyle = "#FF0000";*/

ctx.beginPath();

for(var i = 0; i < mp; i++)

{

var p = particles[i];

ctx.moveTo(p.x, p.y);

ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);

}

ctx.fill();

update();

}



//Function to move the snowflakes

//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes

var angle = 0;

function update()

{

angle += 0.01;

for(var i = 0; i < mp; i++)

{

var p = particles[i];

//Updating X and Y coordinates

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：正则表达式与HTML5新元素

下一篇：HTML 5可以做五件事情 超出你的想象

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

MBR怎么转换为GPT？硬盘MBR格式转换成GPT格

MBR怎么转换为GPT？硬盘MBR格式转换成GPT格式教程...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

美团云5月31日起停止对用户服务
2020-03-22 13:00:36
中国移动2019年净利润1066亿元 超出预期
2020-03-19 18:53:05
国内油价重回“5元时代” 92号汽油每升下调0.80元
2020-03-18 19:35:57
腾讯在天津成立新公司 斥资2亿元人民币
2020-03-18 19:32:46
软银集团或放弃收购WeWork 30亿美元收购要约计划告吹
2020-03-18 19:30:20
全球十大IC设计公司最新排名
2020-03-18 13:04:38

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2020 VEVB.COM. All Rights Reserved.武林网 版权所有