Canvas画矩形

最新推荐文章于 2024-08-18 10:07:21 发布

学习笔记666

最新推荐文章于 2024-08-18 10:07:21 发布

阅读量589

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/51281348

HTML5 专栏收录该内容

43 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<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>

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