HTML5 Canvas 绘制矩形

在html5画布元素上最容易绘制的形状之一是矩形。您可以使用2D上下文 函数 fillRect()和进行操作 stroke Rect()。

在线示例

在html5画布元素上最容易绘制的形状之一是矩形。您可以使用2D上下文 函数 fillRect()和进行操作 stroke Rect()。这是 一个 简单的示例：

示例

<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. stroke Style?=?"#0000ff";????
context. stroke Rect(30,20,?120,110);??????
</script>

行宽 - @R_ 502 _3862@

您可以使用@R_ 502 _3862@2D上下文的 属性 设置描边矩形的线宽。 方法 如下：

示例

<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.@R_ 502 _3862@?=?4;????
context. stroke Rect(x,?y,?width,?height);??????
</script>

这是线宽为4的矩形的外观：

矩形颜色

您可以使用 2D上下文的fillStyle或 stroke Style 属性 设置绘制矩形的颜色。这是第 一个 示例，这些设置以粗体 显示 :

示例

<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>

这是再次在画布上绘制的矩形:

HTML5 Canvas 清除画布 ? ?HTML5 Canvas 描边和填充

查看更多关于HTML5 Canvas 绘制矩形的详细内容...