canvas可以繪制出很多奇妙的樣式和美麗的效果，通過(guò)幾個(gè)簡(jiǎn)單的api就可以在畫(huà)布上呈現(xiàn)出千變?nèi)f化的效果，還可以制作網(wǎng)頁(yè)游戲，接下來(lái)就總結(jié)一下和繪圖有關(guān)的API。

繪畫(huà)的時(shí)候canvas相當(dāng)于畫(huà)布，而context相當(dāng)于畫(huà)筆。

1.繪制線條

moveTo(x0,y0)：把當(dāng)前畫(huà)筆（ictx）移動(dòng)到（x0,y0）這個(gè)位置。

lineTo(x1,y1):從當(dāng)前位置(x0,y0)處到（x1，y1）畫(huà)一條直線。

beginPath()：開(kāi)啟一條路徑或者重置當(dāng)前路徑。

closePath():從當(dāng)前點(diǎn)回到路徑起始點(diǎn)，也就是上一個(gè)beginPath的位置,回避和路徑。

stroke():繪制。必須加了這個(gè)函數(shù)才會(huì)畫(huà)圖，所以這個(gè)一定要放在最后。

var icanvas=document.getElementById("iCanvas");

var ictx=icanvas.getContext("2d");

ictx.beginPath();

ictx.moveTo(0,0);

ictx.lineTo(300,150);

ictx.lineTo(3,150);

ictx.closePath();

ictx.stroke(); 

效果：

這里要注意，如果closepath放在stroke函數(shù)后面，則不會(huì)繪制成一個(gè)閉合的線條，因?yàn)樵陂]合前，已經(jīng)繪制了，所以左邊那條直線不會(huì)畫(huà)出來(lái)。

2.線條樣式

lineCap：線條端點(diǎn)樣式,butt,round,square。                        

lineJoin：兩線條相交時(shí)的拐點(diǎn)樣式，其中設(shè)置為miter時(shí)還可以通過(guò)miterLimet設(shè)置拐點(diǎn)交界處的最大長(zhǎng)度?！　　　　　　　　　　?/p>

miterLimet:如果斜接長(zhǎng)度超過(guò) miterLimit 的值，邊角會(huì)以 lineJoin 的 "bevel" 類(lèi)型來(lái)顯示。

lineWidth：線條寬度

strokeStyle： 線條顏色、漸變(定義好的漸變對(duì)象)、模式。 context.strokeStyle="#333";

var iCanvas=document.getElementById("iCanvas");

var ictx=iCanvas.getContext("2d");

ictx.beginPath();

ictx.strokeStyle="#0000ff";

ictx.lineWidth=20;

ictx.lineCap="round";

ictx.moveTo(10,10);

ictx.lineTo(80,80);

ictx.stroke();

ictx.beginPath();//在這里必須beginPath，不然一直會(huì)以第一個(gè)為基礎(chǔ)會(huì)話，在最后的stroke的時(shí)候，會(huì)再次畫(huà)一條黑色的斜線，一共3條線。

ictx.strokeStyle="#000000";

ictx.lineCap="butt";

ictx.lineWidth=10;

ictx.moveTo(80,10);

ictx.lineTo(10,80);

ictx.stroke(); 

beginPath和closePath可以不成對(duì)出現(xiàn)，兩者之間幾乎沒(méi)有關(guān)系，closePath是用來(lái)閉合終點(diǎn)和起始點(diǎn)畫(huà)一條閉合路徑的。

3.繪制曲線

arc(x,y,radius,startAngle,endAngle,anticlockwise):繪制曲線，radius是曲線半徑，startAngle,endAngle開(kāi)始角度和結(jié)束角度，用的是弧度(Math.PI/180)*角度值，anticlockwise繪制方向；

arcTo(x1,y1,x2,y2,radius):繪制兩切線之前的曲線。

ictx.beginPath();

ictx.moveTo(20,20);           // 創(chuàng)建開(kāi)始點(diǎn)

ictx.lineTo(100,20);          // 創(chuàng)建水平線

ictx.arcTo(150,20,150,70,50); // 創(chuàng)建弧

ictx.lineTo(150,120);         // 創(chuàng)建垂直線

ictx.stroke();    

繪制曲線的起點(diǎn)和水平線結(jié)束點(diǎn)與設(shè)置的第一個(gè)點(diǎn)的連線相切，曲線的終點(diǎn)和第一個(gè)設(shè)置點(diǎn)與第二個(gè)設(shè)置點(diǎn)的連線相切。　　

quadraticCurveTo(x1,y1,x2,y2):二次貝塞爾曲線。（x1，y1）控制點(diǎn)的坐標(biāo)，（x2，y2）結(jié)束點(diǎn)的坐標(biāo)

bezierCurveTo(x1,y1,x2,y2,x,y):三次貝塞爾曲線。（x1，y1）控制點(diǎn)1的坐標(biāo)，（x2，y2）控制點(diǎn)2的坐標(biāo) （x,y）結(jié)束點(diǎn)的坐標(biāo)。

貝塞爾曲線在繪制一些非常流暢的曲線時(shí)非常有用。 

4.繪制矩形及填充

rect():創(chuàng)建矩形；

fillRect(x,y,width,height):繪制被填充的矩形:(x,y)起始點(diǎn)，width，height矩形寬高

strokeRect()：繪制矩形線框

clearRect():清除掉矩形。

ictx.fillStyle="#0000ff";//設(shè)定填充顏色

ictx.fillRect(20,20,150,100);

ictx.strokeRect(180,20,100,100); 

5.畫(huà)筆屬性

fillStyle:設(shè)置填充的顏色，漸變或模式（patten）；

strokeStyle：畫(huà)筆的顏色，漸變或者模式

6.繪制陰影

shadowColor：陰影yanse

shadowBlur:模糊級(jí)別

shadowOffsetX：陰影的水平距離

shadowOffsetY：陰影的垂直距離

ictx.shadowBlur=20;

ictx.shadowColor="#456";

ictx.shadowOffsetX=-10;

ictx.shadowOffsetY=30;//先設(shè)置陰影再畫(huà)矩形

ictx.fillStyle="#108997";

ictx.fillRect(20,20,100,80);

ictx.stroke(); 

 7.繪制漸變

 createLinearGradient(x1,y1,x2,y2):繪制線性漸變，(x1,y1)是漸變的起始點(diǎn)，（x2,y2）是漸變的終點(diǎn)，位置不同可以制作出垂直或者水平漸變。

 createRadialGradient(x1,y1,r1,x2,y2,r2)：徑向漸變：，(x1,y1)是漸變的起始點(diǎn)圓心，r1是半徑，（x2,y2）是漸變的終點(diǎn)，r2是結(jié)束點(diǎn)半徑;

兩種漸變都需要使用

addColorStop(stop,color)來(lái)設(shè)置漸變過(guò)程，stop是0.0到1.0的值。

var grd=ictx.createLinearGradient(0,0,170,0);

grd.addColorStop(0,"#000");

grd.addColorStop(0.5,"#378923");

grd.addColorStop(1,"#ddd");

ictx.fillStyle=grd;//這里漸變是一個(gè)對(duì)象，用來(lái)向fillstyle傳值

ictx.fillRect(20,20,150,100);

 

var grd=ictx.createRadialGradient(300,225,15,250,225,100);

grd.addColorStop(0,"#345");

grd.addColorStop(1,"#fff");

ictx.fillStyle=grd;

ictx.fillRect(200,150,150,100); 

8.填充背景

 createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"):image是一個(gè)圖片對(duì)象，后面的參數(shù)是用來(lái)設(shè)定圖片的重復(fù)方式。

 9.其他相關(guān)API

fill():填充當(dāng)前路徑。

isPointInPath():ictx.isPointInPath(x,y);判斷這個(gè)點(diǎn)是否位于當(dāng)前路徑

清除畫(huà)布方法：獲取畫(huà)布的寬高，icanvas.height,icanvas.width;然后使用clearRect();

修改畫(huà)布的寬高：icanvas.width='200'；icanvas.width='300'的方法。

globalAlpha:設(shè)置透明度，只能是0~1的數(shù)字，如果透明度不一樣，在畫(huà)第二幅之前重新設(shè)置即可。

toDataURL:icanvas.toDataURL(type,encoderOptions)，這個(gè)函數(shù)返回一個(gè)image的base64的URI，參數(shù)都是可選的，type可以設(shè)置圖片類(lèi)型如image/jpeg,image/webp，默認(rèn)是image/png；encoderOptions是一個(gè)0~1的數(shù)字，用來(lái)設(shè)置image/jpeg,image/webp的圖片質(zhì)量，其他格式的type設(shè)置這個(gè)參數(shù)無(wú)效。

 10.剪裁

clip():從畫(huà)布中剪裁任意形狀和尺寸的畫(huà)布，之后所有的繪圖都會(huì)被限制在剪裁的區(qū)域內(nèi)。這個(gè)方法通常和繪制矩形，圓形等路徑一起使用，在這些方法后面，剪切這個(gè)圖像，后來(lái)畫(huà)的就必須在這個(gè)剪切后的畫(huà)布上了。

ictx.arc(100,100,50,(Math.PI/180)*0,(Math.PI/180)*360,true);

ictx.stroke();

ictx.clip();

ictx.fillStyle="green";

ictx.fillRect(0,0,150,100); 

如果還想操作外部的畫(huà)布，在剪切前使用save()函數(shù)保存，剪切后使用restore()函數(shù)恢復(fù)到之前保存的狀態(tài)，但是中間做的操作不會(huì)消失哈。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論