26 canvas繪製矩形

2021-10-25 08:54:46 字數 2083 閱讀 4547

語法

canvas提供了三種方法繪製矩形:

---->繪製乙個填充的矩形(填充色預設為黑色)

fillrect(x, y, width, height)

---->繪製乙個矩形的邊框(預設邊框為:一畫素實心黑色)

strokerect(x, y, width, height)

---->清除指定矩形區域,讓清除部分完全透明。

clearrect(x, y, width, height)

x與y指定了在canvas畫布上所繪製的矩形的左上角(相對於原點)的座標。

width和height設定矩形的尺寸。(存在邊框的話,邊框會在width上佔據乙個邊框的寬度,height同理)

示例

您當前瀏覽器暫不支援canvas,請公升級

if(canvas.getcontext)

效果

問題描述

如上圖我們繪製的矩形邊框時,理論上講預設為1px,渲染時邊框大小也應該是1px。可實際我們通過ps放大可以看出實際是2px。如下所示

問題分析

canvas在渲染矩形邊框時,邊框寬度是平均分在偏移位置的兩側。

context.strokerect(10,10,50,50)

:邊框會渲染在10.5 和 9.5之間,瀏覽器是不會讓乙個畫素只用自己的一半的

相當於邊框會渲染在9到11之間

context.strokerect(10.5,10.5,50,50)

:邊框會渲染在10到11之間

如下

修改方式

ctx.strokerect(50.5,50.5,50,50);
調整後效果

語法

fillstyle   :設定圖形的填充顏色。

strokestyle :設定圖形輪廓的顏色。

預設情況下,線條和填充顏色都是黑色(css 顏色值 #000000)

linewidth : 這個屬性設定當前繪線的粗細。屬性值必須為正數。

描述線段寬度的數字。 0、 負數、 infinity 和 nan 會被忽略。

預設值是1.0。

示例

您當前瀏覽器暫不支援canvas,請公升級

if(canvas.getcontext)

效果

由於canvas渲染效能非常高,渲染機制有別於瀏覽器本身的渲染機制。因此對於樣式及顏色的設定必須寫在繪製之前。否則將不會再繪製時生效。

ctx.linejoin = "round";

round : 圓角

bevel : 斜角

miter : 直角

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 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色...