HTML5中canvas画图之画矩形和矩形掏空

最新推荐文章于 2024-03-27 21:00:16 发布

VIP文章花2不谢

最新推荐文章于 2024-03-27 21:00:16 发布

阅读量1.1w

点赞数 2

分类专栏： HTML5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_25821067/article/details/51628780

版权

rect方法用于绘制矩形（长方形）。其语法如下:

context.rect(x，y，高度，宽度);

绘制代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绘制矩形</title>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas=document.getElementById("canvas");
		var ctx=canvas.getContext("2d");
		//绘制
		ctx.fillStyle="#ff00000";
		ctx.strokeStyle="#0000ff";
		ctx.lineWidth=3;
		ctx.rect(20,20,240,240);
		ctx.fill();//填充
		ctx.stroke();//绘制边框
	</script>
</body>
</html>

最低0.47元/天解锁文章

花2不谢

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5中canvas画图之画矩形和矩形掏空

rect方法用于绘制矩形（长方形）。其语法如下:context.rect(x，y，高度，宽度);绘制代码如下: 绘制矩形 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //绘制 ctx.fillStyle="#ff00000"; ct
复制链接

扫一扫