Canvas画矩形

最新推荐文章于 2022-02-13 16:07:36 发布

原创最新推荐文章于 2022-02-13 16:07:36 发布 · 601 阅读

1 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了如何使用HTML5 Canvas API进行基本图形绘制，包括创建空心和实心矩形的方法，并提供了具体代码实例。

	<canvas id="myCanvas" width="200" height="100">你的浏览器不支持HTML5</canvas>

	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		ctx.lineWidth = 5;
		ctx.strokeStyle = "red";
		ctx.beginPath();
		ctx.strokeRect(10,10,70,40);
	</script>

也可以用下面代码来替换strokeRect函数，它可以实现同样的功能：

ctx.rect(10,10,70,40);
ctx.stroke();

2. 绘制实心的矩形

<canvas id="myCanvas" width="200" height="100">你的浏览器不支持HTML5</canvas>

	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		ctx.fillStyle = "red";
		ctx.beginPath();
		ctx.strokeRect(10,10,70,40);
	</script>

当然这里可以用另一种实现方法绘制矩形，代码如下：