前端——用Canvas绘制矩形

60 阅读 0 评论 40 点赞

我是靠谱客的博主干净冰淇淋，这篇文章主要介绍前端——用Canvas绘制矩形，现在分享给大家，希望可以做个参考。

CanvasRenderingContext2D提供了两个方法绘制几何图形;

fillRect(double x,double y,double width,doubke height)	填充一个矩形区域
strokeRect(double x,double y,double width,double height)	绘制一个矩形边框

也就是说，CanvasRenderingContext2D只提供了绘制矩形的方法，并没有它提供绘制其他几何形状（如圆形、椭圆、三角形）的方法。想要绘制其他几何形状，详情见用canvas绘制折线图
首先绘制一个画布，关键语句如下：

复制代码

1
2
<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>

具体代码如下：
在这里插入图片描述
运行结果为：

这个黑色框就是画布。
下面我们在实践一下fillRect（）和strokeRect（），下面我们画一个矩形并填充颜色。关键语句为：

复制代码

1
2
3
4
5
		//设置填充颜色
		ctx.fillStyle='#f00';
		//填充一个矩形
		ctx.fillRect(30,20,120,60);

在绘制一个矩形边框。绘制矩形边框可以设置线条颜色和线条宽度以及线条的连接风格，关键语句为：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
//设置线条颜色
		ctx.strokeStyle='#00f';
		//设置线条宽度
		ctx.lineWidth=10;	
		//绘制一个矩形的边框
		ctx.strokeRect(30,130,120,60);
	
		//设置线条的颜色
		ctx.strokeStyle="#0ff";
	  //设置线条的连接风格
		ctx.lineJoin="round";
		ctx.strokeRect(80,160,120,60)

下面附上一个实例，运行结果如下图：
在这里插入图片描述
源代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
	<head>
		
	</head>
	<body>
	<h2>绘制矩形</h2>
	<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>
	<script type="text/javascript">
		//获取canvas元素对应的DOM对象
		var canvas=document.getElementById('mc');
		//获取在canvas上绘图的CanvasRenderingContext2d对象
		var ctx =canvas.getContext('2d');
		//设置填充颜色
		ctx.fillStyle='#f00';
		//填充一个矩形
		ctx.fillRect(30,20,120,60);
		//设置填充颜色
		ctx.fillStyle='#ff0';
		//填充一个矩形
		ctx.fillRect(80,60,120,60)
		//设置线条颜色
		ctx.strokeStyle='#00f';
		//设置线条宽度
		ctx.lineWidth=10;	
		//绘制一个矩形的边框
		ctx.strokeRect(30,130,120,60);
		//设置线条的颜色
		ctx.strokeStyle="#0ff";
		//设置线条的连接风格
		ctx.lineJoin="round";
		ctx.strokeRect(80,160,120,60)
		ctx.strokeStyle="#f0f";
		ctx.lineJoin="bevel";
		ctx.strokeRect(130,190,120,60);
	</script>
	</body>
</html>