HTML5中Canvas绘制矩形使用样例

1，绘制实心矩形

可以使用 fillRect() 方法绘制，其填充颜色从绘图上下文的 fillStyle 属性获取。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//填充颜色
context.fillStyle = "blue";
//绘制实心矩形
context.fillRect(50,50,200,100);

2，绘制矩形边框

可以使用 strokeRect() 方法绘制，边框宽度取自lineWidth属性，边框颜色取自strokeStyle属性（同stroke()方法一样）。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//边框线条宽度
context.lineWidth = 10;
//边框线条颜色
context.strokeStyle = "#cd2828";
//绘制矩形边框
context.strokeRect(50,50,200,100)

3，绘制带边框的实心矩形

结合使用 fillRect() 和 strokeRect() 这两个方法即可。

（注意：最好先填充颜色，再绘制轮廓，否则轮廓线会有一部分被填充色覆盖掉。）

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//填充颜色
context.fillStyle = "blue";
//边框线条宽度
context.lineWidth = 10;
//边框线条颜色
context.strokeStyle = "#cd2828";
 
//绘制实心矩形
context.fillRect(50,50,200,100);
//绘制矩形边框
context.strokeRect(50,50,200,100)