14(Canvas)rect

最新推荐文章于 2024-11-09 12:43:52 发布

七色的天空

最新推荐文章于 2024-11-09 12:43:52 发布

阅读量421

点赞数 7

分类专栏： 08_新H5 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/q506174602/article/details/135582906

版权

08_新H5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

本文介绍了HTML5中Canvas元素及其2D渲染API，通过对比fillRect（填充矩形）和strokeRect（描边矩形）函数，展示了如何在JavaScript中使用Canvas绘制带填充和无填充的矩形。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>rect</title>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500"> 您的浏览器不支持canvas </canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('myCanvas');

		var ctx = canvas.getContext('2d');
		ctx.fillStyle = 'red';
		// fillRect(x, y, width, height) 绘制已填充的矩形,默认填充色黑色
		// x y 是起始坐标(左上角), width height 矩形大小 单位是px
		ctx.fillRect(0, 0, 200, 200);
	</script>
</body>
</html>

上述运行结果：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>rect</title>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500"> 您的浏览器不支持canvas </canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('myCanvas');

		var ctx = canvas.getContext('2d');
		ctx.fillStyle = 'red';
		// strokeRect(x, y, width, height) 绘制矩形(无填充),笔触的默认颜色是黑色
		// x y 是起始坐标(左上角), width height 矩形大小 单位是px
		ctx.strokeRect(0, 0, 200, 200);
	</script>
</body>
</html>

上述运行结果：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>rect</title>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500"> 您的浏览器不支持canvas </canvas>


	<script type="text/javascript">
		var canvas = document.getElementById('myCanvas');

		var ctx = canvas.getContext('2d');
		ctx.fillStyle = 'red';
		// fillRect(x, y, width, height) 绘制已填充的矩形,默认填充色黑色
		// x y 是起始坐标(左上角), width height 矩形大小 单位是px
		ctx.fillRect(0, 0, 200, 200);
		// ctx.fillStyle = 'red';
		// strokeRect(x, y, width, height) 绘制矩形(无填充),笔触的默认颜色是黑色
		// x y 是起始坐标(左上角), width height 矩形大小 单位是px
		ctx.strokeRect(0, 0, 200, 200);
	</script>
</body>
</html>

上述运行结果：