如何在 HTML5 Canvas 上繪製一個矩形?
HTML5 <canvas> 標籤用於使用指令碼繪製圖形、動畫等內容。它是 HTML5 中引入的一個新標籤。畫布元素有一個 DOM 方法稱為 getContext,用於獲取渲染上下文及其繪製函式。此函式接受一個引數,即上下文的型別 2d。
要使用 HTML5 畫布繪製一個矩形,使用 fillRect(x, y, width, height) 方法
你可以嘗試執行以下程式碼來了解如何使用 HTML5 畫布繪製矩形
示例
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Tag</title> </head> <body> <canvas id="newCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; ctx.fillRect(0,0,300,100); </script> </body> </html>
輸出
廣告