在JavaScript中使用canvas时遇到画布尺寸问题，即使在CSS中设置了宽高，依然会出现画布高度是宽度两倍的拉伸现象。原因是canvas元素有默认宽高300x150。解决方案是通过JavaScript或内联样式明确设置canvas的宽高，确保与CSS一致，避免拉伸。通过这一方法成功解决了画布尺寸不符的问题。
在使用 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元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
