scratch画旋转的风车,html旋转的风车
写在前面：
各位朋友好，我是自学的。我第一次写博客。想请同学们谅解。
在教学之前，我认为你已经掌握了画布的基本操作方法。如果你对画布了解不多，我建议你先去http://www.w3school.com.cn/tags/html_ref_canvas.asp熟悉一下。
好吧。下图是我们做完后的简单效果。心动不如行动，那就简单画一下吧！
1、定义画布
首先，我们在html文件中插入canvas标签来定义画布的大小。我这里把画布的大小定义为800*600像素。同时在内部样式表中设置画布的背景颜色(方便绘图时查看)；
！DOCTYPE html html lang= en head meta charset= UTF-8 title document/title style type= text/CSS body { padding:0；边距：0；} #canvas {背景：# 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 //获取canvas varctx=document . getelementbyid( canvas )的2d上下文。get context( 2D )；2、绘制风车底座
风车底座的几何形状看起来像一个细长的梯形。我们可以画一个梯形，然后用颜色填充。这里为了达到比较好的效果，使用了颜色渐变填充的方法。好吧。直接看代码~ ~！
//定义一个封装风车函数buttom(){ ctx.beginPath()的底基的函数；//开始新的绘制路径varliner=CTX . createlanegradient(390，600，410，600)；//设置变量(颜色渐变方向-起点-终点)liner.addColorStop(0， # CCC )；//设置起点颜色liner.addColorStop(0.5， # fff )；//设置中点颜色liner.addColorStop(1， # CCC )；//设置结束颜色ctx.fillStyle=liner//梯形的填充方式设置为变量(渐变颜色)ctx.moveTo(395，300)；//举起我们的画笔，将起点设置为(395，300) ctx.lineTo(405，300)；//连接起点，画线ctx.lineTo(410，600)；CTX . line to(39.06万)；CTX . close path()；//关闭路径CTX . fill()；//填充梯形} buttom()；//调用函数，可以在浏览器中显示。让我们来看看页面中的效果。是不是很简单？
感觉自己说话有点多~！~!)
3、绘制叶子
接下来的部分将是这部动画最关键的部分。首先，我们分析树叶的结构。三片叶子之间的角度是120，每片叶子的形状都是一样的。他们有一个圆心，你可能也有一个问题。是先画圆心还是先画叶子？我们应该如何画出叶子的形状？叶子可以复制粘贴吗？答案当然是肯定的，动手吧！
思维分析：
1)，由于三片叶子的形状完全相同，我们只需要画一片叶子，第二片和第三片叶子可以直接复制。聪明，我们是不是应该为这个叶子的绘制封装一个函数？就叫它bind()函数吧！每次都叫就是了！嘿！你们真机智。
2)、三片叶子有一个圆心。画树叶的时候，为了方便取坐标值，我们把圆心从图的左上角移到梯形的顶端，这样我们画树叶会方便很多！这里使用translate()方法来移动坐标系！
3)，最难的一点是理解动画在这里是如何实现的，因为动画的原理会影响到我们叶子图的文档结构：
首先，我们构建一个新的绘图环境，我们称之为环境1。我们画完了环境1的第一片叶子。然后旋转120度在第一个绘图环境的前提下创建第一个绘图环境2，然后在此基础上调用绘制树叶的函数bind()绘制两片树叶；第三片叶子的绘制方法相同，在环境2的基础上旋转120，新建一个环境3，调用叶子绘制函数bind()绘制第三片叶子；
如果要实现动画，只需要旋转第一叶的绘图环境1即可。第二片叶子和第三片叶子是参照环境1绘制的。他们会跟着它走吗？弹幕：66666
4)最后调试一些基本的外观风格！比如颜色渐变，透明度等等！
绘制叶子
我画这个叶子形状的时候，是慢慢调试的。我的审美比较低。原谅我只画这样的叶子。当然，想象力丰富的同学可以根据自己的喜好画出来，但大意是一样的；
这里我声明了一个变量var num=0；作为环境1旋转变化程度的参数：那我们直接看代码吧！
var num=0；函数叶紫(){ CTX . save()；//保存默认的画布变换状态CTX . begin path()；ctx.translate(400，300)；//CTX . global alpha=0.9；//设置坐标系旋转度数ctx.rotate((Math。PI/180)* num)；var line R1=CTX . createlanegradient(30，-12，30，12)；//这里设置颜色渐变填充样式liner1.addColorStop(0， # CCC )；liner1.addColorStop(0.5， # fff )；liner1.addColorStop(1， # CCC )；CTX . fill style=line R1；CTX . save()；//保存第一个状态平移坐标系变换CTX . begin path()；bind()；//调用函数//绘制第二片叶子CTX . begin path()；ctx.rotate((数学。PI/180)* 120)；//坐标系旋转120 CTX . save()；//保存旋转坐标系状态，为第三叶bind()铺路；//调用函数//绘制第三片叶子CTX . begin path()；ctx.rotate((数学。PI/180)* 120)；//坐标系旋转120 CTX . save()；bind()；//调用函数CTX . restore()；//返回3号状态(旋转坐标系)前CTX . restore()；//回到第二种状态(旋转坐标系)之前//画出叶心圆CTX . begin path()；var arc gradient=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，数学。PI * 2)；CTX . fill style=arc gradient；CTX . fill()；CTX . restore()；//num=5才回到第一个状态(平移坐标系)；//在第一种状态下，环境1的坐标系旋转度数增加* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * }//画出每片叶子重复的代码。这里做一个函数包装函数bind(){ ctx.moveTo(0，0)；ctx.quadraticCurveTo(10，-12，30，-12)；//Theil曲线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 . clear rect(0，0，800，600))；//每次代码执行前，画布都要清空，否则绘制的图形会停留在画布上；buttom()；//调用函数叶紫()；},50);源代码：https://github.com/224137748/Canvas/blob/master/windmill.html
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。