/**
* 繪製圓角矩形
* @param ctx - canvas元件的繪圖上下文
* @param x - 矩形的x座標
* @param y - 矩形的y座標
* @param w - 矩形的寬度
* @param h - 矩形的高度
* @param r - 矩形的圓角半徑
* @param [c = 'transparent'] - 矩形的填充色
*/roundrect(ctx, x, y, w, h, r, c = '#fff')
if (h < 2 * r)
ctx.beginpath();
ctx.fillstyle = c;
ctx.arc(x + r, y + r, r, math.pi, math.pi * 1.5);
ctx.moveto(x + r, y);
ctx.lineto(x + w - r, y);
ctx.lineto(x + w, y + r);
ctx.arc(x + w - r, y + r, r, math.pi * 1.5, math.pi * 2);
ctx.lineto(x + w, y + h - r);
ctx.lineto(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, math.pi * 0.5);
ctx.lineto(x + r, y + h);
ctx.lineto(x, y + h - r);
ctx.arc(x + r, y + h - r, r, math.pi * 0.5, math.pi);
ctx.lineto(x, y + r);
ctx.lineto(x + r, y);
ctx.fill();
ctx.closepath();
},
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 繪製矩形及弧形
矩形是唯一一種可以直接在 2d 上下文中繪製的形狀。與矩形有關的方法包括 fillrect strokerect 和 clearrect 這三個方法都能接收 4 個引數 矩形的 x 座標 矩形的 y 座標 矩形寬度和矩形高度 首先，fillrect 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色...