canvas 繪製矩形和圓形

canvas繪製有兩神方法:

1)、填充(fill)

填充是將圖形內部填滿.

2)、繪製邊框 (stroke)

繪製邊框是不把圖形內部填滿，只是繪製圖形的外框.

當我們在繪製圖形的時候，首先要設定好繪製的樣式，然後我們就可以呼叫有關的方法進行繪製

fillstyle屬性

填充的樣式，在這個屬性裡面設定填入的填充顏色值

strokestyle屬性

圖形邊框的樣式，在這個屬性裡面設定填入邊框的填充顏色

繪製矩形案例：

在body的屬性裡面，使用onload="draw('canvas' )「語句，呼叫指令碼檔案中的draw函式進行圖形繪畫

畫布的建立方法：指定 id ， width（畫布寬度）， height（畫布高度）

建立乙個畫布，長度為600，高度為400

引入乙個名為canvas的is指令碼，js指令碼的語言編碼是utf-8

1

function
draw(id)

使用filirect方法和strokerect方法來填充矩形和繪製矩形的邊框

context. fillrect (x,y,width,height)

context.strokerect (x,y,width,height)

這兩種方法的引數都是一樣的，x是指拒形的起點橫座標，y是指拒形的縱座標.座標的原點是canvas畫布的最左上角，

width是指拒形的長度，height是指矩形的高度.

繪製圓形案例：

建立圓形路徑時，需要使用圖形上下文對像的arc方法。

context.arc (x,y,radius,starangle,endangle,anticlockwise)

x是繪製圓形的起點橫座標，y是繪創圓形起點的縱座標，radius是圖形的半徑，

starangle是開始的角度，endangle是結束的角度·

anticlockwise是否按順時針方向繪製

繪製半徑與圓弧時指定引數為開始弧度與結束弧度，也可以把角度換成弧度

var radius = degrees *math.pl/180

這個裡面的math.pl表示的角度是180度，math.pl*2的角度是360度.

1

function
draw(id)
14 }

儲存檔案

1

function
draw(id)

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繪製矩形 html中的元素canvas只支援一種原生的圖形繪製 矩形。所有其他的圖形的繪製都至少需要生成一條路徑 1.繪製矩形 canvas提供了三種方法繪製矩形 繪製乙個填充的矩形 填充色預設為黑色 fillrect x,y,width,height 繪製乙個矩形的邊框 預設邊框為 一...