【JavaScript实战经验】canvas画布出现高是宽的两倍，以及宽高不正确问题的处理（方法探索历程）

寒冰小澈IceClean

于 2021-02-12 20:54:28 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript实战经验笔记文章标签： js canvas html5 javascript

本文链接：https://blog.youkuaiyun.com/Ice__Clean/article/details/113796760

在JavaScript中使用canvas时遇到画布尺寸问题，即使在CSS中设置了宽高，依然会出现画布高度是宽度两倍的拉伸现象。原因是canvas元素有默认宽高300x150。解决方案是通过JavaScript或内联样式明确设置canvas的宽高，确保与CSS一致，避免拉伸。通过这一方法成功解决了画布尺寸不符的问题。

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

在使用 canvas 画布时，只在 css 中设置了宽和高，结果就出现了如标题描述的问题。

最终解决方案

手动为 canvas 标签加上宽和高设置
注意：和CSS的设置应一致，否则依旧会导致拉伸

HTML：
<canvas id="canvas" width="500" height="500"></canvas>

CSS：
#canvas 
{
	width: 500px;
	height: 500px;
	background-color: #999999;
}

代码

HTML：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<link href=

最低0.47元/天解锁文章

200万优质内容无限畅学