在HTML5画布元素上最容易绘制的形状之一是矩形。您可以使用2D上下文函数fillRect()和进行操作strokeRect()。
在HTML5画布元素上最容易绘制的形状之一是矩形。您可以使用2D上下文函数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>测试看看 ‹/›
您可以使用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,10, 100,100); context.strokeStyle = "#0000ff"; context.strokeRect(30,20, 120,110); </script>测试看看 ‹/›
这是再次在画布上绘制的矩形: