HTML5Canvas旋转风车绘制
写在前⾯：
亲爱的朋友们⼤家好，鄙⼈⾃学前端，第⼀次写博客，写的不好的地⽅，烦请同学们谅解.
okey！下图即是我们完成后的简单效果，⼼动不如⾏动，那么咱们就进⾏简单绘制吧！   
1、定义画布
⾸先我们现在html⽂件⾥⾯插⼊<canvas>标签，定义画布的尺⼨，我这⾥定义画布的尺⼨为800*600像素。同时在内部样式表⾥⾯设置canvas的背景⾊（⽅便画图时观看）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#canvas {
background:#5151a2;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>　
接下来的核⼼就是在原⽣JS环境下，绘制风车；通过JS DOM操作⽅法获取到canvas元素对象，并通过
getContex（"2d"）获取2D绘图上下⽂，通过这个⽅法就像是要告诉浏览器“我们要在这个画布上绘制2d图形”；
<script type="text/javascript">
//获取画布的2d上下⽂
var ctx = ElementById("canvas").getContext("2d");
2、绘制风车底座
风车的底座的⼏何图形看似就像⼀个细长细长的梯形，我们可以画出⼀个梯形出来，然后填充颜⾊，这⾥为了达到相对较好的效果，使⽤了颜⾊渐变填充的⽅法；okey！直接看代码吧~~！
//定义⼀个函数，封装风车的底部基座
function buttom(){
ctx.beginPath();                                        //开始⼀条新的绘制路径
var liner = ateLinearGradient(390,600,410,600);    //设置变量（颜⾊渐变的⽅向-起点-终点）
liner.addColorStop(0,"#ccc");                            //设置起点颜⾊
liner.addColorStop(0.5,"#fff");                            //设置中点颜⾊
liner.addColorStop(1,"#ccc");                            //设置终点颜⾊
ctx.fillStyle = liner;                                    //梯形的填充⽅式设置为变量（渐变颜⾊）
ctx.lineTo(405,300);                                    //连接起点画线
ctx.lineTo(410,600);
ctx.lineTo(390,600);
ctx.closePath();                                        //闭合路径
ctx.fill();                                                //填充梯形
}
  buttom();                              //要调⽤函数，才能在浏览器显⽰
我们来看⼀下页⾯中的效果，是不是很简单？
（我感觉我话有点多哦~！~！）
3、绘制叶⼦
接下来的部分将是这个动画中最关键的地⽅，⾸先我们分析⼀下叶⼦的结构，三⽚叶⼦夹⾓为120°，⽽且每⽚叶⼦的形状是相同的；他们有⼀个圆⼼，你⼼中或许也有疑问，先画圆⼼还是先画叶⼦？叶⼦的形状应该怎么画呢？叶⼦可不可复制粘贴呢？答案当然是可以的，Let's do it！　
思路分析：
1）、由于3⽚叶⼦的形状是⼀模⼀样，我们只需要画出⼀⽚叶⼦，第⼆第三⽚叶⼦直接copy就⾏了，聪明的我们是不是应该给这个叶⼦的画法封装⼀个函数呀？就叫它bind(  )函数吧！！每次调⽤它就可以了！哎！你们TM太机智了
2）、三⽚叶⼦有⼀个圆⼼，绘制叶⼦的时候为了⽅便取坐标值，我们将圆⼼从画图的左上⾓移动梯形顶部，这样我们绘制叶⼦会⽅便很多！这⾥使⽤了translate（）⽅法，移动坐标系！
3）、最难的⼀点就是理解这⾥动画是怎么实现的，因为动画原理会影响到我们画叶⼦的⽂档结构：
⾸先我们先新建⼀个绘图环境，我们称它为环境1，我们在环境1上画完第⼀⽚叶⼦；然后在第⼀个绘图环境前提下　旋转120°新建第⼀个绘图环境2，再此基础上调⽤画叶⼦的函数bind(  )，绘制⼆⽚叶⼦；第三⽚叶⼦的绘制⽅法如法炮制，在环境2的基础上旋转120°，新建环境3，调⽤绘制叶⼦函数bind(  )画
第三⽚叶⼦;
如果要实现动画，我们只需要旋转第⼀⽚叶⼦的绘图环境1，第⼆⽚叶⼦和第三⽚叶⼦都是参照环境1为基准画出来的，是不是也跟着动起来了呢？？弹幕：666666
4）、最后就是⼀些基本的外观样式调试的啦！⽐如颜⾊渐变啊，透明度啊，之类的！
绘制叶⼦
画这个叶⼦形状的时候我是慢慢调试的，我的审美相当low，原谅我只能画出这样的叶⼦，当然想象⼒丰富的同学可以根据⾃⼰喜好来绘制，不过⼤体思路是⼀致的；
这⾥我声明了⼀个变量 var num = 0;，作为环境1旋转度数变化的⼀个参数：那么咱就直接看代码吧
var num =0;
function yezi(){
ctx.save();  //保存默认情况下的canvas变换状态
ctx.beginPath();
pdf转html
// ctx.globalAlpha = 0.9;
// 设置第⼀次状态下坐标系旋转度数
var liner1 = ateLinearGradient(30,-12,30,12);      //这⾥设置颜⾊渐变填充的样式
liner1.addColorStop(0,"#ccc");
liner1.addColorStop(0.5,"#fff");
liner1.addColorStop(1,"#ccc");
ctx.fillStyle = liner1;
ctx.save();                //保存第⼀次状态平移坐标系变换
ctx.beginPath();
bind();                //调⽤函数
//绘制第⼆⽚叶⼦
ctx.beginPath();
ctx.save();                        //保存旋转坐标系状态，为第三⽚叶⼦做铺垫
bind();            //调⽤函数
//绘制第三⽚叶⼦
ctx.beginPath();
ctx.save();
bind();    //调⽤函数
//绘制叶⼦中⼼圆圈
ctx.beginPath();
var arcgradient = ateRadialGradient(0,0,0,0,0,16);
arcgradient.addColorStop(0,"#ccc");
arcgradient.addColorStop(0.1,"#fff");
arcgradient.addColorStop(1,"#ccc");
ctx.arc(0,0,10,0,Math.PI*2);
ctx.fillStyle  = arcgradient;
ctx.fill();
num+=5;  //第⼀状下环境1  态坐标系旋转度数增加********************************这个num使得环境1的旋转⾓度在不停的变化，**********************************************        store();
}
//绘制每⽚叶⼦都重复的代码，这⾥做⼀个函数包装
function bind(){
ctx.quadraticCurveTo(10,-12,30,-12);    //⽐赛尔曲线
ctx.lineTo(190,-3);
ctx.quadraticCurveTo(200,0,190,3);   
ctx.lineTo(30,12);
ctx.quadraticCurveTo(10,12,30,12);
ctx.fill();
}
4、设置动画
动画这部分就⽐较简单了，设置定时器，清除画布，调⽤函数；⼤功告成，打完收⼯setInterval(function(){
ctx.clearRect(0,0,800,600);    //每次执⾏代码前，都要将画布清空，不然画出的图形会滞留在画布上；        buttom();              　//调⽤函数　
yezi();
},50);
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。