HTML5 canvas基本繪圖之繪製矩形的範例程式碼詳解

<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复制内容到剪贴板
<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
  
    //使用rect方法   
    context.rect(10,10,190,190);   
    context.lineWidth = 2;   
    context.fillStyle = "#3EE4CB";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();   
  
    //使用fillRect方法   
    context.fillStyle = "#1424DE";   
    context.fillRect(210,10,190,190);   
  
    //使用strokeRect方法   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(410,10,190,190);   
  
    //同时使用strokeRect方法和fillRect方法   
    context.fillStyle = "#1424DE";   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(610,10,190,190);   
    context.fillRect(610,10,190,190);   
</script>

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

另外還有一個跟矩形繪製有關的：清除矩形區域：context.clearRect(x,y,width,height)。
接收參數分別為：清除矩形的起始位置以及矩形的寬度和長度。
在上面的程式碼中繪製圖形的最後加上：

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

可以得到以下效果：

#

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