那些年，年我们一起看过的大风车—

“时间如白驹过隙”不知道是谁发明了这句话，现在细细品味真是那么回事儿。那年我们还不知道什么是HTML更不知道什么是HTML5，但是大风车却给我们这些小朋友们增添了不少的乐趣，可爱的金龟子、稳重的董浩叔叔、漂亮的鞠萍姐姐。而如今再想去享受大风车给我们带来的乐趣，可称之为一种奢望。每天繁忙的工作夺去了我们曾经让我们欢笑的六点钟，回到家以后再也没有“大风车，吱呦吱呦转”的旋律，陪伴我们的永远是那一身的疲惫和那个一天面对面10个小时以上的电脑。大风车走了不要紧，我们还有HTML5；大风车走了不要紧，我们JavaScript。上午工作相对较少，见缝插针手痒就写了一个大风车，愿与各位同仁交流和学习。碎话少说，先看几张效果图：

图一

图二

图三

本小Demo是通过HTML5的Canvas简单的绘制了一个风车并且能够改变风车的转动速度和风车的型号，例子简单希望能够给将要接触HTML Canvas的程序员以参考和入门级例子。那么这个东西是怎么实现的呢？下面将代码粘出来与大家共同交流和学习，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>那年我们一起看过的大风车</title>
<style type="text/css">
#box{ border:2px solid #f60; width:800px; height:600px; margin:0 auto;
}
</style>
<script type="text/javascript">var canvas,context;//画布、上下文var X,Y;//风车的圆心X坐标、Y坐标var canvasWidth,canvasHeight;//画布的宽高var speed = 1;//风车的转速、默认为1var R = 10;//风车的半径/***author:qingfeileedate:2012-03-21description:初始化页面函数*/function init(){initCanvas();initParams();draw();setInterval(draw,20);}/***author:qingfeileedate:2012-03-21description:初始化画布宽高、风车圆心坐标*/function initParams(){canvasWidth = canvas.width;canvasHeight = canvas.height;X = canvasWidth/2;Y = canvasHeight/4;}/***author:qingfeileedate:2012-03-21description:设置风的大小*/function setSpeed(speed){this.speed = speed;}/***author:qingfeileedate:2012-03-21description:设置风的大小*/function setR(R){this.R = R;}/***author:qingfeileedate:2012-03-21description:初始化画布*/function initCanvas(){try{canvas = document.getElementById("windmill");context = canvas.getContext("2d");}catch(e){document.getElementById("tip_info").innerHTML = "您的浏览器不支持！";}}/***author:qingfeileedate:2012-03-21description:绘制半圆*/function drawArc(tangle, style){context.beginPath();var trunkGradient = context.createLinearGradient(X, Y, X, Y+4*R);trunkGradient.addColorStop(0, style);trunkGradient.addColorStop(1, '#FFF00F');context.fillStyle = trunkGradient;context.arc(X - (2*R*Math.cos(tangle)), Y - 2*R*Math.sin(tangle), 2*R, tangle, Math.PI+tangle, true);context.closePath();context.fill();context.save();}/***author:qingfeileedate:2012-03-21description:绘制手把柄*/function drawHandle(){var trunkGradient = context.createLinearGradient(X, Y, X+10, Y);trunkGradient.addColorStop(0, '#663300');trunkGradient.addColorStop(0.4, '#996600');trunkGradient.addColorStop(1, '#552200');context.fillStyle = trunkGradient;context.fillRect(X, Y, 0.2*R, 8*R);}/***author:qingfeileedate:2012-03-21description:绘制文字*/function drawText(){context.font = "30px 宋体 bold";context.textAlign = 'center';context.fillText('那年我们一起看过的大风车', X, canvasWidth - 300, 300);}/***author:qingfeileedate:2012-03-21description:绘制函数*/var tangle = 0;function draw(){tangle = tangle + (speed*1/32)*Math.PI;context.clearRect(0,0,canvasWidth,canvasHeight);drawHandle();drawText();drawArc(tangle,"#552200");drawArc(tangle+1/2*Math.PI, "#990000");drawArc(tangle+Math.PI, "#0033FF");drawArc(tangle+3/2*Math.PI, "#225500");document.getElementById("tip_info").innerHTML = "转动角度："+parseInt(tangle)+"    当前的风速："+speed;}window.addEventListener("load",init,true);
</script>
</head><body><div id="box"><canvas id = "windmill" style = "background-color:#001111" width = "800px" height = "600px"></canvas><div id = "tip_info"></div><div><button onClick="setSpeed(0)">停止</button><button onClick="setSpeed(0.1)">微风</button><button onClick="setSpeed(0.5)">小风</button><button onClick="setSpeed(1)">中风</button><button  onClick="setSpeed(2)">大风</button><button  onClick="setSpeed(4)">狂风</button>|<button onClick="setR(5)">小号</button><button onClick="setR(20)">中号</button><button onClick="setR(30)">大号</button><button onClick="setR(35)">超大号</button></div></div>
</body>
</html>

时间仓促，思路还有改进的空间，如果哪位高人还有好的实现方法还请指点，互相学习，共同进步，欢迎拍砖。

本文乃原创Demo，转载请注明出处：http://blog.csdn.net/qingfeilee/article/details/7377462

O(∩_∩)O谢谢

可以在这里下载此Demo的html文件，附件路径：http://download.csdn.net/detail/qingfeilee/4162633

那些年，年我们一起看过的大风车——HTML5风车效果相关推荐

php验证码图片看不清更换代码,php如何实现验证码看不清换一张的效果
php实现验证码看不清换一张的方法:首先打开PHP代码文件:然后添加js代码"function changing(){document.getElementById('checkpic'). ...
熊猫看直播不能用html5,想去熊猫看直播的同学注意了：5款暴力游戏已禁播
[PConline 资讯]作为国民老公王思聪老板最为出名的产业,熊猫TV至今已经跃升成为国内该行业数一数二直播平台.当然,相信大部分朋友跟小编类似,上直播平台多半是看游戏直播比较多,但是如果你想看的游 ...
无聊中？天天穿格格衫，来为你的网站画个网格线背景吧！小白也能看懂。（Html5 Canvas实现网格线背景）
引入有时候,你会觉得,为啥我做的网站那么丑,就算排版再漂亮也让人觉得是上个世纪的页面. 或许,你没有一个专业的页面设计师. 当然,我们可以做自己的设计师. 既然设计不出高大上的页面,那就从生活中找经 ...
html5 游戏动画设计,设计师必看的10个HTML5动画工具
如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具.HTML5是设计师用来打造时尚网站的最流行的编程语言之一.在过去三年内,这种编程语言的使用人 ...
不错html5画布效果，可惜网站不需要。亲们，可以看一下~
这个效果是在好个博客看到的,之前一直不留意,今天又发现一个博客也使用了这个效果,于是决定拿来研究研究,并制作成DEMO. 这个效果使用了HTML5的画布功能,结合复杂的JS实现了鼠标经过有划痕并且根据 ...
熊猫怎么用html5看直播,熊猫TV HTML5播放器自动网页全屏
// ==UserScript== // @name 熊猫TV HTML5播放器自动网页全屏 // @name:zh-CN 熊猫TV HTML5播放器自动网页全屏 // @namespace pand ...
HTML5垃圾桶效果,Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
效果参考教程: W3school: 菜鸟教程: 关键知识点: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondra ...
手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端叠加图片触屏滑动查看特效.html5手机叠加图片手指滑动查看代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
tomcat和apache的结合看最重要的文档有点乱
tomcat的安装官网下载:tomcat 解压,mv /apache-tomcat-7.0.69 /usr/local/tomcat cp -pv /usr/local/tomcat/bin/ca ...

那些年，年我们一起看过的大风车——HTML5风车效果

那些年，年我们一起看过的大风车——HTML5风车效果相关推荐

最新文章

热门文章