canvas的主要方法（2）

fill() 方法填充當前的影象（路徑）。預設顏色是黑色。

注釋：如果路徑未關閉，那麼 fill() 方法會從路徑結束點到開始點之間新增一條線，以關閉該路徑，然後填充該路徑。

context.fill();填充塊區顏色

context.stroke();通過座標繪製已經定義的路徑

ctx.beginpath();ctx.linewidth="5";

ctx.strokestyle="red"; // 紅色路徑
ctx.moveto(0,75);
ctx.lineto(250,75);
ctx.stroke(); // 進行繪製ctx.beginpath();假設如果沒有這個beginpath則會所有的路徑都是紅色。不會出現藍色，beginpath相當於儲存當前路徑重新開啟另外一條路徑ctx.strokestyle="blue"; // 藍色路徑
ctx.moveto(50,0);
ctx.lineto(150,130);
ctx.stroke();

context.closepath();建立開始點到當前點的路徑

var c=document.getelementbyid("mycanvas");

var ctx=c.getcontext("2d");
ctx.beginpath();
ctx.moveto(20,20);
ctx.lineto(20,100);
ctx.lineto(70,100);ctx.closepath();ctx.stroke();
畫出三角形

context.moveto(x,y);

路徑的目標位置的 x 座標

y路徑的目標位置的 y 座標

var c=document.getelementbyid("mycanvas");

var ctx=c.getcontext("2d");
ctx.beginpath();ctx.moveto(0,0);//開始點ctx.lineto(300,150);//移動點
ctx.stroke();//填充實線
注意：可根據此方法用滑鼠拖動畫線。

context.arc(x,y,r,sangle,eangle,counterclockwise);//畫圓圈,可以設定fillstyle的樣式（顏色），在呼叫fill（）方法可以給圓上顏色。

圓的中心的 x 座標。

y圓的中心的 y 座標。

r圓的半徑。

sangle

起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。

eangle

結束角，以弧度計。

counterclockwise

可選。規定應該逆時針還是順時針繪圖。false = 順時針，true = 逆時針。

scale() 方法縮放當前繪圖，更大或更小。

注釋：如果您對繪圖進行縮放，所有之後的繪圖也會被縮放。定位也會被縮放。如果您 scale(2,2)，那麼繪圖將定位於距離畫布左上角兩倍遠的位置。

context.scale(scalewidth,scaleheight);縮放當前，按照一定的比例。

描述scalewidth

縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)

scaleheight

縮放當前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.)

drawimage() 方法也能夠繪製影象的某些部分，以及/或者增加或減少影象的尺寸。

在畫布上定位影象：

context.drawimage(img,x,y);在畫布上定義流**，影象和視屏均可

context.drawimage(img,x,y,width,height);

context.drawimage(img,sx,sy,swidth,sheight,x,y,width,height);

描述img

sx可選。開始剪下的 x 座標位置。

sy可選。開始剪下的 y 座標位置。

swidth

可選。被剪下影象的寬度。

sheight

可選。被剪下影象的高度。

x在畫布上放置影象的 x 座標位置。

y在畫布上放置影象的 y 座標位置。

width

可選。要使用的影象的寬度。（伸展或縮小影象）

height

可選。要使用的影象的高度。（伸展或縮小影象）

canvas 常用方法

beginpath 新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑。closepath 閉合路徑之後圖形繪製命令又重新指向到上下文中。stroke 用線條繪製圖形輪廓。fill 填充路徑的內容區域生成實心的圖形。moveto x,y 將筆觸移動到指定的座標 x,y lineto x,y ...

Canvas 常用方法

繪製帶有間距的文字 text 要繪製的文字 x 繪製文字的起始x座標 y 繪製文字的起始y座標 space 文字間距 ctx canvas物件 canvastextspace text,x,y,space,ctx else 文字超出maxwidtth寬度，自動換行 text 要繪製的文字 x 繪製文...

canvas的arc 方法詳解

在做專案時畫曲線時主要用的就是arc 畫圓弧的方法 context.arc x,y,r,sangle,eangle,counterclockwise 即 arc 圓心的x座標，圓心的y座標，圓的半徑，起始角 以弧度計，即l圓心的3點鐘位置是0度 結束角，規定應該是順時針還是逆時針畫圖 其中最後乙個引...