关于Canvas画布大小问题

最新推荐文章于 2025-02-17 17:17:17 发布

=筷子夹豆腐=

最新推荐文章于 2025-02-17 17:17:17 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签： css canvas html css3 js

本文链接：https://blog.youkuaiyun.com/Keep_Doing/article/details/114372769

HTML+CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5 Canvas元素的默认尺寸及如何通过不同方法正确设置其宽度和高度，避免因使用CSS设置而产生的变形问题。

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

1.canvas大小默认为300X150

 <canvas id="myCanvas" style=" background-color: rgb(218, 108, 108);"></canvas>
 <script>
   var canvas = document.getElementById('myCanvas')
   var context = canvas.getContext("2d");
    context.fillRect(0, 0, 100, 100);
</script>

在这里插入图片描述

2.错误的设置宽高，导致画布内内容变形

1）内联样式
 <canvas style="width:450px;height:300px;"></canvas>
2）内部样式
<style type="text/css">
#myCanvas {
  width: 450px;
 height:300px;
 }
 </style>
3）外部样式
<--canvas.css代码-->
 #myCanvas {
 width: 450px;
 height:300px;
 }
 <-- 引入html中-->
 <link rel="stylesheet" href="canvas.css" />
 ...
 <canvas id="myCanvas"></canvas>

在这里插入图片描述
这是因为，使用css设置画布的大小会导致画布按比例缩放你设置的值。（css只是设置canvas在屏幕的显示大小）

3.正确设置画布宽高的方式

 //方法一
 <canvas width="450" height="350"></canvas>
 //方法二：通过js实现
 <canvas id="myCanvas"></canvas>
 <script>
     var ele = document.getElementById("myCanvas);
     ele.width="450";//注意：没有单位
     ele.height="300";//注意：没有单位
     var context= ele.getContext("2d");
     context.fillStyle="red";
     context.fillRect(0,0,100,100);
 </script>