一、繪製矩形:
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 繪製乙個矩形的邊框 預設邊框為 一...