###canvas繪製矩形
html中的元素canvas只支援一種原生的圖形繪製：矩形。所有其他的圖形的繪製都至少需要生成一條路徑
1.繪製矩形
canvas提供了三種方法繪製矩形：
---->繪製乙個填充的矩形(填充色預設為黑色)
fillrect(x, y, width, height)
---->繪製乙個矩形的邊框(預設邊框為:一畫素實心黑色)
strokerect(x, y, width, height)
---->清除指定矩形區域，讓清除部分完全透明。
clearrect(x, y, width, height)
x與y指定了在canvas畫布上所繪製的矩形的左上角(相對於原點)的座標。
width和height設定矩形的尺寸。(存在邊框的話，邊框會在width上佔據乙個邊框的寬度，height同理)
2.strokerect時，邊框畫素渲染問題
按理渲染出的邊框應該是1px的，
canvas在渲染矩形邊框時，邊框寬度是平均分在偏移位置的兩側。
context.strokerect(10,10,50,50)
:邊框會渲染在10.5 和 9.5之間,瀏覽器是不會讓乙個畫素只用自己的一半的
相當於邊框會渲染在9到11之間
context.strokerect(10.5,10.5,50,50)
:邊框會渲染在10到11之間
3.新增樣式和顏色
fillstyle :設定圖形的填充顏色。
strokestyle :設定圖形輪廓的顏色。
預設情況下，線條和填充顏色都是黑色(css 顏色值 #000000)
linewidth : 這個屬性設定當前繪線的粗細。屬性值必須為正數。
描述線段寬度的數字。 0、 負數、 infinity 和 nan 會被忽略。
預設值是1.0。
您的瀏覽器不支援畫布元素 請您換成萌萌的谷歌
view code
您的瀏覽器不支援畫布元素 請您換成萌萌的谷歌
view code
4.linewidth & 覆蓋渲染
5.linejoin
設定線條與線條間接合處的樣式(預設是 miter)
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 繪製矩形和圓形
canvas繪製有兩神方法 1 填充 fill 填充是將圖形內部填滿.2 繪製邊框 stroke 繪製邊框是不把圖形內部填滿，只是繪製圖形的外框.當我們在繪製圖形的時候，首先要設定好繪製的樣式，然後我們就可以呼叫有關的方法進行繪製 fillstyle屬性 填充的樣式，在這個屬性裡面設定填入的填充顏色...