HTML5 教程HTML5 浏览器支持HTML5 新元素HTML5 Video 视频HTML 5 Video + DOMHTML5 Audio 音频HTML5 拖放 ( drag 和 drop )HTML5 Canvas画布HTML5 内联 SVGHTML5 MathML 数学公式HTML5 Geolocation 地理定位HTML5 新的 Input 类型HTML5 表单元素HTML5 表单属性HTML5 语义元素HTML5 Web 存储HTML5 Web SQL 数据库HTML5 应用程序缓存HTML5 Web WorkersHTML 5 服务器发送事件HTML5 WebSocketHTML5 历史记录APIHTML 5 代码规范HTML5 Canvas 描边和填充HTML5 Canvas 绘制矩形HTML5 Canvas 清除画布HTML5 Canvas 路径HTML5 Canvas 渐变HTML5 Canvas 阴影HTML5 Canvas 绘制文本HTML5 Canvas 绘制图像HTML5 Canvas 合成HTML5 Canvas 状态HTML5 Canvas toDataURL()HTML5 Canvas 像素处理HTML5 Canvas 制作动画HTML5 Canvas 转换
HTML5 Canvas 绘制矩形
在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>行宽 - 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,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>这是再次在画布上绘制的矩形:
