js设置canvas的宽高（动态设置canvas的宽高）

最新推荐文章于 2026-05-04 09:12:27 发布

原创最新推荐文章于 2026-05-04 09:12:27 发布 · 5.2w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#canvas #javascript #html #前端网页 html

收录于

征战HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了三种设置HTML5 Canvas元素宽高的方法：直接在HTML标签中定义、通过JS动态设置及动态创建Canvas元素并调整其大小。重点讲解了在JS中设置宽高的正确方式以避免图像变形。

该文章已生成可运行项目，

设置canvas的宽高有两种方式：

1：在html的canvas标签中设置宽高

	<body>
		
		<canvas id="canvas" width="300" height="300"></canvas>
		
	</body>

2：在js中设置canvas的宽高

注意：在js中设置canvas的宽高时，如果设置方式不正确，或者在cass中设置时，在绘制图像时就会出现拉伸的情况。这是因为canvas的默认宽高为300px*150px，在css中设置canvas的宽高，实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。

在js中设置canvas的宽高时应当使用以下方法：

			document.getElementById("canvas").width = 600;
			document.getElementById("canvas").height = 600;

3：在js中动态创建canvas

代码如下：

html:

<div id="canvas_box"></div>

js:

			window.onload = function(){
			var canvas = document.createElement("canvas");
			canvas.style.border = "solid 1px red";
			canvas.id = "canvas";
			var box = document.getElementById("canvas_box");
			box.appendChild(canvas);
			
			//设置宽高一定要在canvas节点添加之后
			document.getElementById("canvas").width = 600;
			document.getElementById("canvas").height = 600;
	
			}

本文章已经生成可运行项目