HTML5 canvas基本繪圖之繪製矩形

是HTML5中新增的標籤，用於繪製圖形，這篇文章主要為大家詳細介紹了HTML5 canvas基本繪圖之繪製矩形方法，感興趣的小伙伴們可以參考一下

只是一個繪製圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在>元素上繪圖主要有三步：

1.取得元素對應的DOM對象，這是一個Canvas物件；
2.呼叫Canvas物件的getContext( )方法，得到一個CanvasRenderingContext2D物件；
3.呼叫CanvasRenderingContext2D物件進行繪圖。

繪製矩形rect()、fillRect()和strokeRect()

 •context.rect( x , y , width , height )：只定義矩形的路徑;
 •context.fillRect( x , y , width , height )：直接繪製出填滿的矩形；
 •context.strokeRect( x , y , width , height )：直接繪製出矩形邊框；

JavaScript Code複製內容到剪貼簿

1. "text/javascript">   

2.     var canvas = document.getElementById("canvas"#);  document.getElementById(

   "canvas"
#);

3. #    var context = canvas.getContext("2d"

   );   

4.   

5. ##    //使用rect方法

     

6.     context.rect(10,10,190,190);   

7.     context.lineWidth = 2;   

8.     context.fillStyle = #"#3EE4CB"

   ; > = 
"#F5270B"
9. ;   
   #    context.fill();   

10.     context.stroke()

11. ## 

12. #  

13.     

    //使用fillRect方法  

14.     context ##"#1424DE"

    ;   

    context.fillRect(210,10,190,190);   
卷
16. ##    

    //使用strokeRect方法

      

17.     context.strokeStyle = 

    ##    context.strokeRect(410,10,190,190);   

18.   

19.     

    ///同時使用stroke方法和

    
20. //

      

21.     context.fillStyle = "#1424DE";   

22. ##   #F5270B"

    ;   

    context.strokeRect(610,10,190,190);   

23. #   

24. ##   

25. #  

這裡需要說明兩點：第一點就是stroke()和fill()繪製的前後順序，如果fill()後面繪製，那麼當stroke邊框較大時，會明顯的把stroke()繪製出的邊框遮住一半；第二點：設定fillStyle或strokeStyle屬性時，可以透過「rgba(255,0,0,0.2)」的設定方式來設置，這個設定的最後一個參數是透明度。

27. 另外還有一個跟矩形繪製有關的：清除矩形區域：context.clearRect(x,y,width,height)。

    接收參數分別為：清除矩形的起始位置以及矩形的寬度和長度。
在上面的程式碼中繪製圖形的最後加上：

context.clearRect(100,60,600,100);

可以得到以下效果：

#

以上是HTML5 canvas基本繪圖之繪製矩形的詳細內容。更多資訊請關注PHP中文網其他相關文章！