今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html，感觉CSS3太神奇了，这在以前用CSS是想都不敢想的。记得去年自己用canvas也写过这样的大风车，今天我打算用canvas制作一个一模一样的，连速度都一致的大风车。

　　大家请看下面两张图，你们看得出这两张图有什么区别吗？哪张是CSS3写的哪张是canvas写的？

　　下面就来介绍制作风车的过程。先上代码吧：

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <canvas id = "canvas" width="300" height="300"></canvas>

    <script>

        (function () {

            var Pinwheel = function (canvas, options) {

                this.canvas = document.getElementById(canvas);

                this.options = options;

            };

            Pinwheel.prototype = {

                constructor: Pinwheel,

                show: function () {

                    var canvas = this.canvas,//取得canvas元素

                            width = canvas.width,//canvas元素的宽度

                            height = canvas.height,//canvas元素的高度

                            color = this.options.color,//风车叶子的颜色

                            radius = this.options.radius,//整个风车的半径

                            wheelRadius = this.options.wheelRadius,//风车叶子的半径

                            part = this.options.part,//PI/2分成几份

                            ctx = canvas.getContext("2d"),//获取上下文

                            num = this.options.num,//叶子数量

                            center = {x: width / 2, y: height / 2},//绘图区域的中心

                            point, //叶子圆心位置

                            start = 0,//绘制叶子的开始角

                            angle = 0,//start = angle

                            end = Math.PI,//绘制叶子的结束角

                            offset = Math.PI * (360 / num) / 180,//两个相邻叶子之间的角度

                            rotateAngle = offset / part;//每次旋转的角度

//                    window.timer = setInterval(function () {

                        ctx.clearRect(0, 0, width, height);

                        for (var i = 0; i < num; i += 1) {

                            ctx.beginPath();//开始绘制叶子

                            var wheelGradient = ctx.createRadialGradient(center.x, center.y, 100, center.x, center.y, 0);//创建径向渐变

                            wheelGradient.addColorStop(0, color[i]);//起始颜色

                            wheelGradient.addColorStop(1, "#000");//结束颜色

                            ctx.fillStyle = wheelGradient;//填充渐变样式

                            point = {x: center.x + Math.cos(offset * i + angle) * radius, y: center.y + Math.sin(offset * i + angle) * radius};//叶子圆心位置

                            var x = start + offset * i;//绘制叶子的开始角

                            var y = end + offset * i;//绘制叶子的结束角

                            ctx.arc(point.x, point.y, wheelRadius, x, y, false);//绘制

                            ctx.fill();//填充

                            ctx.closePath();//结束绘制

                        }

                        ctx.beginPath();

                        var dotGradient = ctx.createRadialGradient(center.x, center.y, 0, center.x, center.y, 40);

                        dotGradient.addColorStop(0, "#fff");

                        dotGradient.addColorStop(1, "#666");

                        ctx.fillStyle = dotGradient;

                        ctx.arc(center.x, center.y, 25, 0, 2 * Math.PI, false);

                        ctx.fill();

                        ctx.closePath();

                        angle += rotateAngle;

                        start = angle;

                        end = Math.PI + angle;

//                    }, 20)

                },

                hide: function () {

                    clearInterval(window.timer);

                }

            };

            var options = {

                num: 4,

                color: ["red", "yellow", "blue", "green"],

                radius: 50,

                wheelRadius: 50,

                part: 50

            };

            var a = new Pinwheel("canvas", options);

            a.show();

        }());

    </script>

</body>

</html>

首先，确定需要的各项参数：

var canvas = this.canvas,//取得canvas元素

width = canvas.width,//canvas元素的宽度

height = canvas.height,//canvas元素的高度

color = this.options.color,//风车叶子的颜色

radius = this.options.radius,//整个风车的半径

wheelRadius = this.options.wheelRadius,//风车叶子的半径

part = this.options.part,//PI/2分成几份

ctx = canvas.getContext("2d"),//获取上下文

num = this.options.num,//叶子数量

center = {x: width / 2, y: height / 2},//绘图区域的中心

point, //叶子圆心位置

start = 0,//绘制叶子的开始角

angle = 0,//start = angle

end = Math.PI,//绘制叶子的结束角

offset = Math.PI * (360 / num) / 180,//两个相邻叶子之间的角度

rotateAngle = offset / part;//每次旋转的角度

循环绘制每个叶子：

for (var i = 0; i < num; i += 1) {

　　ctx.beginPath();//开始绘制叶子

　　var wheelGradient = ctx.createRadialGradient(center.x, center.y, 100, center.x, center.y, 0);//创建径向渐变

　　wheelGradient.addColorStop(0, color[i]);//起始颜色

　　wheelGradient.addColorStop(1, "#000");//结束颜色

　　ctx.fillStyle = wheelGradient;//填充渐变样式

　　point = {x: center.x + Math.cos(offset * i + angle) * radius, y: center.y + Math.sin(offset * i + angle) * radius};//叶子圆心位置

　　var x = start + offset * i;//绘制叶子的开始角

　　var y = end + offset * i;//绘制叶子的结束角

　　ctx.arc(point.x, point.y, wheelRadius, x, y, false);//绘制

　　ctx.fill();//填充

　　ctx.closePath();//结束绘制

}

绘制中间的大圆点：

ctx.beginPath();

var dotGradient = ctx.createRadialGradient(center.x, center.y, 0, center.x, center.y, 40);

dotGradient.addColorStop(0, "#fff");

dotGradient.addColorStop(1, "#666");

ctx.fillStyle = dotGradient;

ctx.arc(center.x, center.y, 25, 0, 2 * Math.PI, false);

ctx.fill();

ctx.closePath();

　　上面的代码已经可以制作静态的风车了，但是我们要做的是动态的，于是我们需要一个计时器。下面是计时器代码：

　　window.timer = setInterval(function () {

　　　　ctx.clearRect(0, 0, width, height);//每次调用计时器需要重绘

　　　　for (var i = 0; i < num; i += 1) {

　　　　　　ctx.beginPath();//开始绘制叶子

　　　　　　var wheelGradient = ctx.createRadialGradient(center.x, center.y, 100, center.x, center.y, 0);//创建径向渐变

　　　　　　wheelGradient.addColorStop(0, color[i]);//起始颜色

　　　　　　wheelGradient.addColorStop(1, "#000");//结束颜色

　　　　　　ctx.fillStyle = wheelGradient;//填充渐变样式

　　　　　　point = {x: center.x + Math.cos(offset * i + angle) * radius, y: center.y + Math.sin(offset * i + angle) * radius};//叶子圆心位置

　　　　　　var x = start + offset * i;//绘制叶子的开始角

　　　　　　var y = end + offset * i;//绘制叶子的结束角

　　　　　　ctx.arc(point.x, point.y, wheelRadius, x, y, false);//绘制

　　　　　　ctx.fill();//填充

　　　　　　ctx.closePath();//结束绘制

　　　　}

　　　　ctx.beginPath();

　　　　var dotGradient = ctx.createRadialGradient(center.x, center.y, 0, center.x, center.y, 40);

　　　　dotGradient.addColorStop(0, "#fff");

　　　　dotGradient.addColorStop(1, "#666");

　　　　ctx.fillStyle = dotGradient;

　　　　ctx.arc(center.x, center.y, 25, 0, 2 * Math.PI, false);

　　　　ctx.fill();

　　　　ctx.closePath();

　　　　angle += rotateAngle;

　　　　start = angle;

　　　　end = Math.PI + angle;
　　}, 20)

　　动态的风车基本上就做完了，这是运行大风车代码：

var options = {

　　num: 4,

　　color: ["red", "yellow", "blue", "green"],

　　radius: 50,

　　wheelRadius: 50,

　　part: 50

　　};

var a = new Pinwheel("canvas", options);

a.show();

修改options对象的属性就会改变风车的状态。　　

　　需要停止风车运转调用这个函数：

hide: function () {

　　clearInterval(window.timer);

}

　　下面是展示结果的时候了:

　　以前写这些代码是没有注释的，今天花了好大功夫加上注释，然后在原有基础上做了一些修改，做成了和CSS3写的一模一样的风车。

HTML5 canvas制作童年的回忆大风车的更多相关文章

  1. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  2. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

  3. [译]怎样用HTML5 Canvas制作一个简单的游戏

    这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...

  4. HTML5 Canvas制作雷达图实战

    雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图. 下面,用HTML5的Cavas来实现雷达图. 效果 一.创建Canvas var mW ...

  5. 使用 HTML5 canvas制作拾色器

    自制的拾色器漂亮吧,哈哈 废话不多说直接上代码,希望可以帮到需要的朋友 <html><head>    <style>        .canvas_color{p ...

  6. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  7. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  8. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  9. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

随机推荐

  1. 个人开发者即时到账收款方案 BufPay.com

    BufPay 个人即时到账支付平台 前言 作为独立开发者,一般只有一个人独立奋战,做出了产品需要收款是非常麻烦的,接入支付宝微信支付都需要公司公户,而注册公司.开公户等一系列操作非常麻烦,成本也很高一 ...

  2. scroll()，scrollTop()，scrollBy()无效问题的总结

    · 使用的浏览器:Chrome(67.0.3396.87)/火狐(60.0.2)/IE(ie7和ie8),均为PC端. · 代码如下 表现结果: Chrome:只有第一次打开标签页面是有效的(在当前标 ...

  3. CentOS7.5二进制安装MySQL-5.6.40

    安装依赖 yum install -y gcc gcc-c++ automake autoconf yum -y install cmake bison-devel ncurses-devel lib ...

  4. wamp 的配置

    一 . 安装  二 . 配置 安装过后打开E:\wamp2\wamp\bin\apache\Apache2.2.21\conf\httpd.conf 寻找Directoy 为文件路径 里面的默认文件删 ...

  5. laravel5.5源码阅读草稿——入口

    laravel的启动需要通过路由.中间件.控制器.模型.视图最后出现在浏览器.而路由.中间件.模型,这些功能都有自己的类,比如Route::any().DB::table().$this->mi ...

  6. tp3.2源码解析——入口文件

    如果有人读这篇文章并跟着做的话,希望你能使用支持函数跳转的编辑器,还要善用var_dump和exit,对着源码去调试着看.跟着入口文件读,执行到哪里你看到哪里,对于那些不能一眼看出来的配置,则要记录下 ...

  7. [转]MySQL常用字符串函数

    本文转载自:http://www.cnblogs.com/geaozhang/ 是最常用的的一种函数,在一个具体应用中通常会综合几个甚至几类函数来实现相应的应用: 1.LOWER(column|str ...

  8. Active MQ C++实现通讯记录

    Active MQ  C++实现通讯 背景知识: ActiveMQ是一个易于使用的消息中间件. 消息中间件 我们简单的介绍一下消息中间件,对它有一个基本认识就好,消息中间件(MOM:Message O ...

  9. linux 下安装 Cisco Packet Tracer 7.11以及一些注意

    https://blog.csdn.net/qq_35882901/article/details/77652571 https://linux.cn/article-5576-1.html 开启登录 ...

  10. 笔记-sql语句

    笔记-sql语句 1.      sql语句基础 虽然经常使用sql语句,但没有一个整体式的文档,整理了一下. 1.1.    select foundation: select <colnum ...