canvas繪製矩形和路徑方式

2021-08-19 03:57:08 字數 1396 閱讀 1766

一、繪製矩形:

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);
引數描述x

矩形左上角的 x 座標

y矩形左上角的 y 座標

width

矩形的寬度,以畫素計

height

矩形的高度,以畫素計

二、繪製路徑:

1.context.fill();//如果路徑未關閉,那麼 fill() 方法會從路徑結束點到開始點之間新增一條線,以關閉該路徑,然後填充該路徑。

2.context.stroke();//實際地繪製出通過 moveto() 和 lineto() 方法定義的路徑。預設顏色是黑色。

3.contet.beginpath();//beginpath() 方法開始一條路徑,或重置當前的路徑。用這些方法來建立路徑:moveto()、lineto()、quadriccurveto()、beziercurveto()、arcto() 以及 arc()。用 stroke() 方法在畫布上繪製確切的路徑。

4.moveto(x,y) 5

to(x,y)

6.closepath();//

建立從當前點到開始點的路徑。

7.context.clip();//clip() 方法從原始畫布中剪下任意形狀和尺寸。

8.context.quadraticcurveto(cpx,cpy,x,y);//建立二次貝塞爾曲線

9.context.beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y);//建立三次方貝塞爾曲線

10.context.arc(x,y,r,sangle,eangle,counterclockwise);//arc() 方法建立弧/曲線(用於建立圓或部分圓)。    counterclockwise:false = 順時針,true = 逆時針。預設順時針。

11.context.arcto(x1,y1,x2,y2,r);//arcto() 方法在畫布上建立介於兩個切線之間的弧/曲線。(w3c有誤,x1,y1應為控制點座標)

12.context.ispointinpath(x,y);//

方法返回 true,如果指定的點位於當前路徑中;否則返回 false。

.line

Canvas繪製矩形

context.rect x y width height 規劃了矩形的路徑 context.fillrect x y width height 根據fillstyle繪製出乙個填充的矩形 context.strokerect x y width height 根據strokestyle繪製出乙個矩...

canvas繪製矩形

1.繪製乙個填充的矩形 fillrect x,y,width,height 2.繪製乙個矩形的邊框 strokerect x,y,width,height 3.清除指定矩形區域,讓清除部分完全透明 clearrect x,y,width,height 其中x y是相對於畫布左上角0,0 的距離,wi...

canvas繪製線和矩形

canvas繪製矩形 html中的元素canvas只支援一種原生的圖形繪製 矩形。所有其他的圖形的繪製都至少需要生成一條路徑 1.繪製矩形 canvas提供了三種方法繪製矩形 繪製乙個填充的矩形 填充色預設為黑色 fillrect x,y,width,height 繪製乙個矩形的邊框 預設邊框為 一...