整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
制圓和圓弧
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。
注釋：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素。
arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。
提示：如需通過 arc() 來創(chuàng)建圓，請把起始角設(shè)置為 0，結(jié)束角設(shè)置為 2*Math.PI。
提示：請使用 stroke() 或 fill() 方法在畫布上繪制實(shí)際的弧。
context.arc(x,y,r,sAngle,eAngle,counterclockwise);參數(shù)描述x圓的中心的 x 坐標(biāo)。y圓的中心的 y 坐標(biāo)。r圓的半徑。sAngle起始角，以弧度計(jì)。（弧的圓形的三點(diǎn)鐘位置是 0 度）。eAngle結(jié)束角，以弧度計(jì)。counterclockwise可選。規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖。False = 順時(shí)針，true = 逆時(shí)針。
示例
繪制矩形
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 rect() 方法。
注釋：Internet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素。
rect() 方法創(chuàng)建矩形。
提示：請使用 stroke() 或 fill() 方法在畫布上實(shí)際地繪制矩形。
context.rect(x,y,width,height);參數(shù)描述x矩形左上角的 x 坐標(biāo)y矩形左上角的 y 坐標(biāo)width矩形的寬度，以像素計(jì)height矩形的高度，以像素計(jì)
實(shí)例１
實(shí)例２
繪制“被填充”的矩形
繪制矩形（無填充）
在給定的矩形內(nèi)清除指定的像素
tml 5 互聯(lián)網(wǎng)的計(jì)算機(jī)瀏覽器
canvas結(jié)構(gòu)：
<canvas id="canvas"></canvas>
如果不給canvas指定大小，canvas默認(rèn)是300px寬，150px高。是行內(nèi)元素。通常使用width或者h(yuǎn)eight屬性指定其大小，不要使用CSS給canvas指定其大小。
繪圖主要在context：
canvas.getContext('2d')
畫直線：
context.moveTo(x,y); context.lineTo(x+500,y+200); context.stroke()
案例：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
canvas 是基于狀態(tài)繪制的，即先定義狀態(tài)，后繪制。
起始一條路徑和結(jié)束（回到起點(diǎn)）路徑
ctx.beginPath(); ctx.closePath(); //會(huì)自動(dòng)將不封閉的圖形加上連線
矩形：
context.rect(x,y,width,height);
畫圓和弧：
更多特殊設(shè)置，請參閱：http://www.w3school.com.cn/tags/html_ref_canvas.asp
制作動(dòng)畫的架構(gòu)：
HTML5中基本線條的繪制
在Canvas畫布中我們可以使用JavaScript這支畫筆繪制各種圖形，它的功能之所以這么強(qiáng)大，是因?yàn)镃anvas的CanvasRenderingContext2D對象為我們提供了豐富多彩的API工具，包括我們本次要了解的直線、二次曲線、貝賽爾曲線和圓弧曲線，下表中列出的這些API就是我們本次基本線條的繪制要用到的幾種API。
HTML5中基本線條的繪制要用到的幾種API
1.繪制直線
我們在學(xué)生時(shí)代的幾何課上就已經(jīng)學(xué)過了“兩點(diǎn)一線”，那么Canvas在繪制直線的時(shí)候也需要一個(gè)起點(diǎn)和一個(gè)終點(diǎn)，繪制直線的代碼如下圖所示：
在HTML5中繪制直線代碼
在谷歌瀏覽器中的預(yù)覽效果如下圖所示：
在HTML5中繪制直線預(yù)覽效果
2.繪制二次曲線
二次曲線（quadratic curve）也稱圓錐曲線或圓錐截線，是直圓錐面的兩腔被一個(gè)面所截而得的曲線。二次曲線由一個(gè)起點(diǎn)、一個(gè)終點(diǎn)和一個(gè)控制點(diǎn)決定，當(dāng)控制點(diǎn)經(jīng)過圓錐頂點(diǎn)時(shí)，曲線變成一個(gè)點(diǎn)、直線或相交線，當(dāng)控制點(diǎn)不經(jīng)過圓錐頂點(diǎn)時(shí)，曲線可能是圓、橢圓、雙曲線和拋物線。使用Canvas的quadraticCurveTo函數(shù)繪制二次曲線的代碼如下圖所示：
在HTML5中繪制二次曲線的代碼
在谷歌瀏覽器中的預(yù)覽效果如下圖所示：
在HTML5中繪制二次曲線的代碼
3.繪制貝塞爾曲線
貝塞爾曲線是電腦圖形中非常重要的參數(shù)曲線，廣泛應(yīng)用于計(jì)算機(jī)圖形中為平鋪曲線建立模型。貝塞爾曲線的每一個(gè)頂點(diǎn)都有兩個(gè)控制點(diǎn)，用于控制在該點(diǎn)兩側(cè)的曲線的弧度。它有一個(gè)起點(diǎn)、一個(gè)終點(diǎn)、兩個(gè)控制點(diǎn)，共四個(gè)點(diǎn)決定一條曲線。使用Canvas的bezierCurveTo函數(shù)可以非常方便地繪制曲線，繪制貝塞爾曲線的代碼如下圖所示：
在HTML5中繪制貝塞爾曲線代碼示例
在谷歌瀏覽器中的預(yù)覽效果如下圖所示：
在HTML5中繪制貝塞爾曲線預(yù)覽圖
4.繪制圓弧
使用Canvas的arc方法繪制圓弧的代碼如下圖所示：
在HTML5中繪制圓弧的代碼
在谷歌瀏覽器中的預(yù)覽效果如下圖所示：
在HTML5中繪制圓弧的代碼
這些便是幾種基本線條的繪制方法了，還是很有意思的，大家在練習(xí)的時(shí)候可以試著繪制一些形狀，試不出來也沒關(guān)系，下一篇中我們將會(huì)介紹一些簡單的形狀的繪制方法。謝謝大家的觀看。祝大家：身體健康、生活愉快。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
