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