在html5畫布元素上最容易繪制的形狀之一是矩形。您可以使用2D上下文函數(shù)fillRect()和進行操作strokeRect()。 在線示例在html5畫布元素上最容易繪制的形狀之一是矩形。您可以使用2D上下文函數(shù)fillRect()和進行操作strokeRect()。這是一個簡單的示例： <canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script> var canvas = document.getElementById("ex1"); var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>行寬 - linewidth您可以使用linewidth2D上下文的屬性設置描邊矩形的線寬。方法如下： <canvas id="ex4" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100;
context.linewidth = 4;
context.strokeRect(x, y, width, height);
</script>這是線寬為4的矩形的外觀：
矩形顏色您可以使用 2D上下文的fillStyle或strokeStyle屬性設置繪制矩形的顏色。這是第一個示例，這些設置以粗體顯示: <canvas id="ex5" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,110);
</script>這是再次在畫布上繪制的矩形:
|
