最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5中Canvas绘制矩形使用样例
时间:2016-01-18 编辑:简简单单 来源:一聚教程网
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.line;
//边框线条颜色
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.line;
//边框线条颜色
context.strokeStyle = "#cd2828";
//绘制实心矩形
context.fillRect(50,50,200,100);
//绘制矩形边框
context.strokeRect(50,50,200,100)
相关文章
- html5 canvas 详细使用教程 02-10
- html5中canvas 圆周运动和椭圆运动例子 08-21
- html5中canvas脉冲运动示例 08-21
- html5中canvas正弦波运动示例详解 08-21
- HTML5 Canvas画图板的例子 06-28
- HTML5 - Canvas动画效果的例子 02-25