HTML5画布中绘制旋转风车的方法

　　介绍

小编给大家分享一下HTML5画布中绘制旋转风车的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

下图即是我们完成后的简单效果,心动不如行动,那么咱们就进行简单绘制吧!

HTML5画布中绘制旋转风车的方法

<强> 1,定义画布

首先我们现在html文件里面插入& lt; canvas>标签,定义画布的尺寸,我这里定义画布的尺寸为800 * 600像素。同时在内部样式表里面设置画布的背景色(方便画图时观看),

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; title> Document 　　,,,& lt; style 类型=拔谋?css"比; 　　,,,,,,,身体{ 　　,,,,,,,,,,,填充:,0; 　　,,,,,,,,,,,保证金:,0; 　　,,,,,,,} 　　,,,,,,,# canvas  { 　　,,,,,,,,,,,背景:# 5151 a2; 　　,,,,,,,} 　　,,,& lt;/style> 　　& lt;/head> 　　& lt; body> 　　,,,& lt; canvas  id=癱anvas",宽度=?00“,身高=?00“祝辞& lt;/canvas> 　　& lt;/body> 　　& lt;/html>

接下来的核心就是在原生JS环境下,绘制风车;通过JS DOM操作方法获取到画布元素对象,并通过getContex (“2 d")获取2 d绘图上下文,通过这个方法就像是要告诉浏览器”我们要在这个画布上绘制2 d图形”,

& lt; script 类型=拔谋?javascript"比; 　　 　　,,,//获取画布的2 d上下文 　　,,,var  ctx =, . getelementbyid (“canvas") .getContext (“2 d");

<强> 2,绘制风车底座

风车的底座的几何图形看似就像一个细长细长的梯形,我们可以画出一个梯形出来,然后填充颜色,这里为了达到相对较好的效果,使用了颜色渐变填充的方法;好!直接看代码吧~ ~ !

//定义一个函数,,封装风车的底部基座 　　,,,function 鞋底(){ 　　,,,,,,,ctx.beginPath(),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,//开始一条新的绘制路径 　　,,,,,,,var  liner =, ctx.createLinearGradient(390600410600),,,,,//设置变量(颜色渐变的方向,起点——终点) 　　,,,,,,,liner.addColorStop (0,“# ccc");,,,,,,,,,,,,,,,,,,,,,,,,,,,,//设置起点颜色 　　,,,,,,,liner.addColorStop (0.5,“# fff");,,,,,,,,,,,,,,,,,,,,,,,,,,,,//设置中点颜色 　　,,,,,,,liner.addColorStop (1,“# ccc");,,,,,,,,,,,,,,,,,,,,,,,,,,,,//设置终点颜色 　　,,,,,,,ctx.fillStyle =,衬套,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,//梯形的填充方式设置为,变量(渐变颜色),,,, 　　,,,,,,,ctx.moveTo(395300),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,//提起我们的画笔,起点设置为(395300) 　　,,,,,,,ctx.lineTo(405300),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,//连接起点画线 　　,,,,,,,ctx.lineTo (410600); 　　,,,,,,,ctx.lineTo (390600),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, 　　,,,,,,,ctx.closePath(),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,//闭合路径 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

HTML5画布中绘制旋转风车的方法