context.rect ( x ,y ,width ,height ) //規劃了矩形的路徑
context.fillrect ( x ,y ,width ,height ) //根據fillstyle繪製出乙個填充的矩形
context.strokerect ( x ,y ,width ,height ) 根據strokestyle繪製出乙個矩形的邊框
context.rect() 與context.fillrect()、context.strokerect()的區別
context.rect()只是規劃了矩形的路徑,而context.fillrect()、context.strokerect()不但規劃了矩形的路徑還把矩形繪製了出來。
fillstyle和strokestyle的賦值:
① #ffffff
② #4e3
③ rgb( 100 ,100 ,2 )
④ rgba( 100 ,100 ,20 ,0.9 )
⑤ hsla( 40 ,82% ,33% ,0.6 )
⑥ hsl( 40 ,82% ,33% )
⑦ red
注:css3 顏色值hsl表示方式:hsl(h,s,l)
- h:hue(色調)。0(或360)表示紅色,120表示綠色,240表示藍色,也可取其他數值來指定顏色。取值為:0 - 360
- s:saturation(飽和度)。取值為:0.0% - 100.0%
- l:lightness(亮度)。取值為:0.0% - 100.0%
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 繪製矩形及弧形
矩形是唯一一種可以直接在 2d 上下文中繪製的形狀。與矩形有關的方法包括 fillrect strokerect 和 clearrect 這三個方法都能接收 4 個引數 矩形的 x 座標 矩形的 y 座標 矩形寬度和矩形高度 首先,fillrect 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色...
Canvas 元素繪製矩形
使用canvas元素,必須先設定 width 和 height 屬性,指定可以繪圖的區域大小。要在這塊畫布上繪圖,需要取得繪圖上下文。而取得繪圖上下文物件的引用,需要呼叫 getcontext 方法並傳入上下文的名字。傳入 2d 就可以取得2d上下文物件。與矩形相關的方法包括 fillrect st...