首頁  >  文章  >  web前端  >  HTML5 canvas基本繪圖之繪製矩形的範例程式碼詳解

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

黄舟
黄舟原創
2017-03-14 15:46:492236瀏覽

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

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b只是一個繪製圖形的容器,除了id、class、style等屬性外,還有heightwidth屬性。在5ba626b379994d53f7acf72a64f9b697>元素上繪圖主要有三步驟:

1.取得5ba626b379994d53f7acf72a64f9b697元素對應的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>

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

這裡需要說明兩點:第一點就是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基本繪圖之繪製矩形的範例程式碼詳解

#

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn