动手学Javascript(3)——HTML5模拟下雪
来源:互联网 发布:2016年9月非农数据预测 编辑:程序博客网 时间:2024/04/29 00:49
马上就是圣诞节,基于HTML5的Canvas写个网页动画,祝大家圣诞节快乐。
在该网页中动画中,用简单的模型模拟下雪的场景,其截屏效果如下图所示。如果你想看动画的动态效果,也可以到网页http://jsfiddle.net/zhedahht/2uD5x/1/ 查看。
雪花被简化成一个白色的圆形,并按照正弦曲线缓慢降落。这个模型虽然简单,但效果基本满足卡通动画的要求。代码如下:
$(document).ready(function () { makeSnow("christmasSnow", "./Image/Christmas.jpg");});function makeSnow(canvasId, imagePath) { var christmasSnow = new ChristmasSnow(canvasId, imagePath); renderAndUpdate.christmasSnow = christmasSnow; setInterval(renderAndUpdate, 15);}function renderAndUpdate() { renderAndUpdate.christmasSnow.render(); renderAndUpdate.christmasSnow.update();}function ChristmasSnow(canvasId, imagePath) { var snowElement = document.getElementById(canvasId); this.canvasContext = snowElement.getContext("2d"); this.width = snowElement.clientWidth; this.heigth = snowElement.clientHeight; this.image = initImage(imagePath); this.snow = initSnow(this.width, this.heigth);}function initImage(imagePath) { var image = new Image(); image.src = imagePath; return image;}function initSnow(width, height) { var minRasius = 3, maxRadius = 10, minSpeedY = 1, maxSpeedY = 3, speedX = 0.05, minAlpha = 0.5, maxAlpha = 1.0, minMoveX = 4, maxMoveX = 18; var snowSettings = new SnowSettings(minRasius, maxRadius, width, height, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX); var snow = []; var snowNumber = 200; for(var i = 0; i < snowNumber; ++i) { snow[i] = new Snow(snowSettings); } return snow;}ChristmasSnow.prototype.render = function() { // render background image this.canvasContext.drawImage(this.image, 0, 0); // render snow for(var i = 0; i < this.snow.length; ++i) { this.snow[i].render(this.canvasContext); }}ChristmasSnow.prototype.update = function() { for(var i = 0; i < this.snow.length; ++i) { this.snow[i].update(); }}function SnowSettings(minRadius, maxRadius, maxX, maxY, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX) { this.minRadius = minRadius; this.maxRadius = maxRadius; this.maxX = maxX; this.maxY = maxY; this.speedX = speedX; this.minSpeedY = minSpeedY; this.maxSpeedY = maxSpeedY; this.minAlpha = minAlpha; this.maxAlpha = maxAlpha; this.minMoveX = minMoveX; this.maxMoveX = maxMoveX;}function Snow(snowSettings) { this.snowSettings = snowSettings; this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius); this.initialX = Math.random() * snowSettings.maxX; this.y = Math.random() * snowSettings.maxY; this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY); this.speedX = snowSettings.speedX; this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha); this.angle = Math.random(Math.PI * 2); this.x = this.initialX + Math.sin(this.angle); this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);}Snow.prototype.render = function(canvasContext) { canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")"; canvasContext.beginPath(); canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); canvasContext.closePath(); canvasContext.fill(); }Snow.prototype.update = function() { this.y += this.speedY; if (this.y > this.snowSettings.maxY) { this.y -= this.snowSettings.maxY; } this.angle += this.speedX; if (this.angle > Math.PI * 2) { this.angle -= Math.PI * 2; } this.x = this.initialX + this.moveX * Math.sin(this.angle);}function randomInRange(min, max) { var random = Math.random() * (max - min) + min; return random;}
如果您感兴趣,可以到如下链接下载源代码:
http://download.csdn.net/detail/haitaohe/6757563。
3 0
- 动手学Javascript(3)——HTML5模拟下雪
- 动手学Javascript(1)——PopStar
- 动手学Javascript(2)——超过30岁还能做程序员吗?
- 动手学MFC之一——为什么学MFC
- 动手学Android之一——为什么要学Android
- 动手学MFC之九——带上绘图搞定FlappyBird(上)
- 动手学MFC之十——带上绘图搞定FlappyBird(下)
- 动手学Android之四——布局初步(一)
- 动手学Android之五——布局初步(二)
- 动手学Android之六——布局初步(三)
- 动手学MFC之二——对话框初探
- 动手学MFC之三——对话框控件
- 动手学MFC之六——不止一个对话框
- 动手学MFC之七——进军单文档
- 动手学MFC之八——鼠标和键盘
- 动手学Android之二——初识Activity
- 动手学Android之三——第一个界面
- 动手学Android之七——Activity生命周期
- Android利用Fiddler进行网络数据抓包
- AES加密算法
- hadoop datanode 磁盘坏掉之后的解决办法
- MTU原理及相关问题分析
- JBPM介绍及视频教程
- 动手学Javascript(3)——HTML5模拟下雪
- 调用wait的语句一定要写在synchronized 方法中吗?
- excel 如何检查重复行
- Android Dialog用法
- 中文字符串写入文本文件及从文本文件中读取中文字符串
- 模板
- 浅谈删除表中的重复数据的几种方式
- 回归二线城市成都后的蛋疼面试经历!
- windows网络命令汇总