canvas路徑繪製

慣例，先貼**：

1 /**

2  * created by administrator on 2016/1/27.
3  */
4 function draw (id)

**解釋：此**會生成一條直線，乙個矩形，乙個圓形。

這種路徑繪製方式分為三步：

1）建立繪圖路徑；

1

context.beginpath();
2     context.moveto(20,30);
3     context.lineto(100,200);
4     context.rect(50,50,100,100);
5     context.arc(50,50,100,0,math.pi*2,true
);6     context.closepath();

1      context.fillstyle = "ff6100";

2     context.strokestyle = "0000ff";
3     context.linewidth = 2;

1

context.fill();
2     context.stroke();

rect(x,y,width,heigth)和arc 不再贅述。

canvas繪製路徑

方法 beginpath 建立乙個新的路徑 lineto 描繪路徑 closepath 沿著路徑畫直線，並且畫點移動到路徑開頭 stroke 繪製形狀 fill 填充形狀，會自動呼叫closepath方法 畫乙個實心六邊形 const canvas document.getelementbyid c...

canvas繪製矩形和路徑方式

一 繪製矩形 1.context.rect x,y,width,height 2.context.fillrect x,y,width,height 3.context.strokerect x,y,width,height 4.context.clearrect x,y,width,height ...

Canvas繪製基礎

繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...