这里我声明了一个变量 var num = 0;，作为环境1旋转度数变化的一个参数：  那么咱就直接看代码吧！！！

var num =0; function yezi(){ ctx.save(); //保存默认情况下的canvas变换状态 ctx.beginPath(); ctx.translate(400,300); // ctx.globalAlpha = 0.9; // 设置第一次状态下 坐标系旋转度数 ctx.rotate((Math.PI/180)*num); var liner1 = ctx.createLinearGradient(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.rotate((Math.PI/180)*120); //坐标系旋转120° ctx.save(); //保存旋转坐标系状态，为第三片叶子做铺垫 bind(); //调用函数 //绘制第三片叶子 ctx.beginPath(); ctx.rotate((Math.PI/180)*120); //坐标系旋转120° ctx.save(); bind(); //调用函数 ctx.restore(); //回复第3次状态前（旋转坐标系） ctx.restore(); //回复第2次状态前（旋转坐标系） //绘制叶子中心圆圈 ctx.beginPath(); var arcgradient = ctx.createRadialGradient(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(); ctx.restore(); //回复第1次状态前（平移坐标系） num+=5; //第一状下 环境1 态坐标系旋转度数增加********************************************************这是精髓，**************************************************************************************************** ctx.restore(); } //绘制每片叶子都重复的代码，这里做一个函数包装 function bind(){ ctx.moveTo(0,0); ctx.quadraticCurveTo(10,-12,30,-12); ctx.lineTo(190,-3); ctx.quadraticCurveTo(200,0,190,3); ctx.lineTo(30,12); ctx.moveTo(0,0); ctx.quadraticCurveTo(10,12,30,12); ctx.fill(); }

4、设置动画

动画这部分就比较简单了，设置定时器，清除画布，调用函数；大功告成，打完收工！！！

setInterval(function(){ ctx.clearRect(0,0,800,600);　　　　//每次执行代码前，都要将画布清空，不然画出的图形会滞留在画布上； buttom();　　　　　　　　　　　　　　　//调用函数　 yezi(); },50);

啊 ！忘记给源码了，sorry！

https://github.com/224137748/Canvas/blob/master/windmill.html

分享给小伙伴们：

本文标签： Canvas，旋转风车/">Canvas，旋转风车

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻