canvas繪製矩形

2021-10-14 17:00:37 字數 691 閱讀 4831

1.繪製乙個填充的矩形

fillrect(x, y, width, height)

2.繪製乙個矩形的邊框

strokerect(x, y, width, height)

3.清除指定矩形區域,讓清除部分完全透明

clearrect(x, y, width, height)

其中x、y是相對於畫布左上角0,0 的距離,width是寬度,height設定矩形高度;

window.onload=function()
繪製了兩個長方形乙個只有有邊框的,乙個只有填充的

window.onload=function()
可以看到黑色的正方形裡面被清除出來乙個邊長為80的正方形區域,clearrect就是這個作用

window.onload=function()
看到如下效果

Canvas繪製矩形

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

繪製矩形 canvas 繪製矩形及弧形

矩形是唯一一種可以直接在 2d 上下文中繪製的形狀。與矩形有關的方法包括 fillrect strokerect 和 clearrect 這三個方法都能接收 4 個引數 矩形的 x 座標 矩形的 y 座標 矩形寬度和矩形高度 首先,fillrect 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色...

Canvas 元素繪製矩形

使用canvas元素,必須先設定 width 和 height 屬性,指定可以繪圖的區域大小。要在這塊畫布上繪圖,需要取得繪圖上下文。而取得繪圖上下文物件的引用,需要呼叫 getcontext 方法並傳入上下文的名字。傳入 2d 就可以取得2d上下文物件。與矩形相關的方法包括 fillrect st...