【www.bbyears.com--html5教程】
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)