3856173a0eceb679792f65a38e1fcb00c2caaf3fc160dd2513ce82f021917f8b是HTML5中新增的標籤,用來繪製圖形,這篇文章主要為大家詳細介紹了HTML5 canvas基本繪圖之繪製矩形方法,有興趣的小夥伴們可以參考一下
5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b只是一個繪製圖形的容器,除了id、class、style等屬性外,還有height和width屬性。在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>
這裡需要說明兩點:第一點就是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中文網其他相關文章!