HTML5 - Canvas的使用样例2（绘制矩形）
作者：hangge | 2016-01-16 09:01
1，绘制实心矩形
3，绘制带边框的实心矩形
结合使用 fillRect() 和 strokeRect() 这两个方法即可。
（注意：最好先填充颜色，再绘制轮廓，否则轮廓线会有一部分被填充色覆盖掉。）
可以使用 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)
全部评论（0）