寫在前面：
親愛的朋友們大家好，鄙人自學(xué)前端，第一次寫博客，寫的不好的地方，煩請(qǐng)同學(xué)們諒解.
在進(jìn)行教學(xué)之前，我想聰明的你已經(jīng)掌握了基本的Canvas基本操作方法，如果對(duì)Canvas還不是很了解，那么我建議你去http://www.w3school.com.cn/tags/html_ref_canvas.asp這里先熟悉一下；
okey！下圖即是我們完成后的簡(jiǎn)單效果，心動(dòng)不如行動(dòng)，那么咱們就進(jìn)行簡(jiǎn)單繪制吧！
1、定義畫布
首先我們現(xiàn)在html文件里面插入<canvas>標(biāo)簽，定義畫布的尺寸，我這里定義畫布的尺寸為800*600像素。同時(shí)在內(nèi)部樣式表里面設(shè)置canvas的背景色（方便畫圖時(shí)觀看）；
<!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>
接下來(lái)的核心就是在原生JS環(huán)境下，繪制風(fēng)車；通過(guò)JS DOM操作方法獲取到canvas元素對(duì)象，并通過(guò)getContex（"2d"）獲取2D繪圖上下文，通過(guò)這個(gè)方法就像是要告訴瀏覽器“我們要在這個(gè)畫布上繪制2d圖形”；
<script type="text/javascript">
//獲取畫布的2d上下文
var ctx = document.getElementById("canvas").getContext("2d");
2、繪制風(fēng)車底座
風(fēng)車的底座的幾何圖形看似就像一個(gè)細(xì)長(zhǎng)細(xì)長(zhǎng)的梯形，我們可以畫出一個(gè)梯形出來(lái)，然后填充顏色，這里為了達(dá)到相對(duì)較好的效果，使用了顏色漸變填充的方法；okey！直接看代碼吧~~！
//定義一個(gè)函數(shù) ，封裝風(fēng)車的底部基座
function buttom(){
ctx.beginPath(); //開始一條新的繪制路徑
var liner = ctx.createLinearGradient(390,600,410,600); //設(shè)置變量（顏色漸變的方向-起點(diǎn)-終點(diǎn)）
liner.addColorStop(0,"#ccc"); //設(shè)置起點(diǎn)顏色
liner.addColorStop(0.5,"#fff"); //設(shè)置中點(diǎn)顏色
liner.addColorStop(1,"#ccc"); //設(shè)置終點(diǎn)顏色
ctx.fillStyle = liner; //梯形的填充方式設(shè)置為 變量（漸變顏色）
ctx.moveTo(395,300); //提起我們的畫筆，起點(diǎn)設(shè)置為（395,300）
ctx.lineTo(405,300); //連接起點(diǎn)畫線
ctx.lineTo(410,600);
ctx.lineTo(390,600);
ctx.closePath(); //閉合路徑
ctx.fill(); //填充梯形
}
buttom(); //要調(diào)用函數(shù)，才能在瀏覽器顯示
我們來(lái)看一下頁(yè)面中的效果，是不是很簡(jiǎn)單？
（我感覺我話有點(diǎn)多哦~！~！）
3、繪制葉子
接下來(lái)的部分將是這個(gè)動(dòng)畫中最關(guān)鍵的地方，首先我們分析一下葉子的結(jié)構(gòu)，三片葉子夾角為120°，而且每片葉子的形狀是相同的；他們有一個(gè)圓心，你心中或許也有疑問，先畫圓心還是先畫葉子？葉子的形狀應(yīng)該怎么畫呢？葉子可不可復(fù)制粘貼呢？答案當(dāng)然是可以的，Let's do it！
思路分析：
1）、由于3片葉子的形狀是一模一樣，我們只需要畫出一片葉子，第二第三片葉子直接copy就行了，聰明的我們是不是應(yīng)該給這個(gè)葉子的畫法封裝一個(gè)函數(shù)呀？就叫它bind( )函數(shù)吧??！每次調(diào)用它就可以了！哎！你們TM太機(jī)智了
2）、三片葉子有一個(gè)圓心，繪制葉子的時(shí)候?yàn)榱朔奖闳∽鴺?biāo)值，我們將圓心從畫圖的左上角移動(dòng)梯形頂部，這樣我們繪制葉子會(huì)方便很多！這里使用了translate（）方法，移動(dòng)坐標(biāo)系！
3）、最難的一點(diǎn)就是理解這里動(dòng)畫是怎么實(shí)現(xiàn)的，因?yàn)閯?dòng)畫原理會(huì)影響到我們畫葉子的文檔結(jié)構(gòu)：
首先我們先新建一個(gè)繪圖環(huán)境，我們稱它為環(huán)境1，我們?cè)诃h(huán)境1上畫完第一片葉子；然后在 第一個(gè)繪圖環(huán)境前提下 旋轉(zhuǎn)120°新建第一個(gè)繪圖環(huán)境2，再此基礎(chǔ)上調(diào)用畫葉子的函數(shù)bind( )，繪制二片葉子;第三片葉子的繪制方法如法炮制，在環(huán)境2的基礎(chǔ)上旋轉(zhuǎn)120°，新建環(huán)境3，調(diào)用繪制葉子函數(shù)bind( )畫第三片葉子;
如果要實(shí)現(xiàn)動(dòng)畫，我們只需要旋轉(zhuǎn)第一片葉子的繪圖環(huán)境1，第二片葉子和第三片葉子都是參照環(huán)境1為基準(zhǔn)畫出來(lái)的，是不是也跟著動(dòng)起來(lái)了呢？？ 彈幕：666666
4）、最后就是一些基本的外觀樣式調(diào)試的啦！比如顏色漸變啊，透明度啊，之類的！
繪制葉子
畫這個(gè)葉子形狀的時(shí)候我是慢慢調(diào)試的，我的審美相當(dāng)low，原諒我只能畫出這樣的葉子，當(dāng)然想象力豐富的同學(xué)可以根據(jù)自己喜好來(lái)繪制，不過(guò)大體思路是一致的；
這里我聲明了一個(gè)變量 var num = 0;，作為環(huán)境1旋轉(zhuǎn)度數(shù)變化的一個(gè)參數(shù)： 那么咱就直接看代碼吧?。?！
var num =0;
function yezi(){
ctx.save(); //保存默認(rèn)情況下的canvas變換狀態(tài)
ctx.beginPath();
ctx.translate(400,300);
// ctx.globalAlpha = 0.9;
// 設(shè)置第一次狀態(tài)下 坐標(biāo)系旋轉(zhuǎn)度數(shù)
ctx.rotate((Math.PI/180)*num);
var liner1 = ctx.createLinearGradient(30,-12,30,12); //這里設(shè)置顏色漸變填充的樣式
liner1.addColorStop(0,"#ccc");
liner1.addColorStop(0.5,"#fff");
liner1.addColorStop(1,"#ccc");
ctx.fillStyle = liner1;
ctx.save(); //保存第一次狀態(tài) 平移坐標(biāo)系變換
ctx.beginPath();
bind(); //調(diào)用函數(shù)
//繪制第二片葉子
ctx.beginPath();
ctx.rotate((Math.PI/180)*120); //坐標(biāo)系旋轉(zhuǎn)120°
ctx.save(); //保存旋轉(zhuǎn)坐標(biāo)系狀態(tài)，為第三片葉子做鋪墊
bind(); //調(diào)用函數(shù)
//繪制第三片葉子
ctx.beginPath();
ctx.rotate((Math.PI/180)*120); //坐標(biāo)系旋轉(zhuǎn)120°
ctx.save();
bind(); //調(diào)用函數(shù)
ctx.restore(); //回復(fù)第3次狀態(tài)前（旋轉(zhuǎn)坐標(biāo)系）
ctx.restore(); //回復(fù)第2次狀態(tài)前（旋轉(zhuǎn)坐標(biāo)系）
//繪制葉子中心圓圈
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(); //回復(fù)第1次狀態(tài)前（平移坐標(biāo)系）
num+=5; //第一狀下 環(huán)境1 態(tài)坐標(biāo)系旋轉(zhuǎn)度數(shù)增加********************************這個(gè)num使得環(huán)境1的旋轉(zhuǎn)角度在不停的變化，**********************************************
ctx.restore();
}
//繪制每片葉子都重復(fù)的代碼，這里做一個(gè)函數(shù)包裝
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、設(shè)置動(dòng)畫
動(dòng)畫這部分就比較簡(jiǎn)單了，設(shè)置定時(shí)器，清除畫布，調(diào)用函數(shù)；大功告成，打完收工?。?！
setInterval(function(){
ctx.clearRect(0,0,800,600); //每次執(zhí)行代碼前，都要將畫布清空，不然畫出的圖形會(huì)滯留在畫布上；
buttom(); //調(diào)用函數(shù)
yezi();
},50);
源碼：https://github.com/224137748/Canvas/blob/master/windmill.html
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
