Canvas實現旋轉風車的繪製
- php中世界最好的语言原創
- 2018-03-27 09:23:444933瀏覽
這次帶給大家Canvas實現旋轉風車的繪製，Canvas實現旋轉風車繪製的注意事項有哪些，下面就是實戰案例，一起來看一下。
在進行教學之前，我想聰明的你已經掌握了基本的Canvas基本操作方法，如果對Canvas還不是很了解，那麼我建議你去http://www.w3school.com.cn /tags/html_ref_canvas.asp這裡先熟悉一下；
okey！下圖即是我們完成後的簡單效果，心動不如行動，那麼咱們就進行簡單繪製吧！
1、定義畫布
#首先我們現在html檔案裡面插入
<!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 = document.getElementById("canvas").getContext("2d");
2、繪製風車底座
風車的底座的幾何圖形看似像一個細長細長的梯形，我們可以畫出一個梯形出來，然後填充顏色，這裡為了達到相對較好的效果，使用了顏色漸層填滿的方法；okey！直接看代碼吧~~！
//定义一个函数 ，封装风车的底部基座
function buttom(){
ctx.beginPath(); //开始一条新的绘制路径
var liner = ctx.createLinearGradient(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.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();
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 态坐标系旋转度数增加********************************这个num使得环境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);
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是Canvas實現旋轉風車的繪製的詳細內容。更多資訊請關注PHP中文網其他相關文章！