解决fillRect方法画矩形变形的问题

李默821

2024-04-24 帮助1人

一、问题发现

当我想用ctx.fillRect(0,0,100,100)在画布上画一个宽100px，高100px的正方形时，却发现画出了一个矩形，怀着困惑，我在菜鸟教程上找到了原因。

二、原因

该图片来自菜鸟教程对<canvas>元素的介绍：

学新通

为了更加方便大家的理解，我用分别三个画布画长100px，宽100px的正方形为例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
</head>
<style>
#myCanvas1, #myCanvas2, #myCanvas3{
border: 1px solid black;
}
/* 用css给画布1设置宽高 */
#myCanvas1{
width: 300px;
height: 300px;
}
</style>
<body>
<canvas id="myCanvas1"></canvas>
<canvas id="myCanvas2"></canvas>
<canvas id="myCanvas3" width="300px" height="300px"></canvas>
<script>
// 画布1
var a = document.getElementById("myCanvas1");
var atx = a.getContext("2d");
atx.fillStyle = "#FF0000";
atx.fillRect(0,0,100,100);
// 画布2
var b = document.getElementById("myCanvas2");
var btx = b.getContext("2d");
btx.fillStyle = "#FF0000";
btx.fillRect(0,0,100,100);
// 画布3
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,100,100);
</script>
</body>
</html>

画布1是由css设置的大小，宽为300px,高为300px;

画布2未设置宽高。<canvas>默认宽300px,高150px,比例为2:1.

画布3是直接在<canvas>标签内设置宽高属性,宽为300px,高为300px;

学新通

解释：

由此我们可知在css中设置的是画布拉伸后的宽高，原始宽高未定义默认为宽300px,高150px。所以当在css中设置画布宽300px,高300px时，宽度不变，高度较原始高度拉长一倍，所以里面的矩形高度也应该拉长一倍（如图1）。在<canvas>中设置宽高属性，设置的是画布本身的宽高，所以在里面画的图像不会变形（如图2，图3）。

三、解决问题

那么如何设置画布为300px,300px,里面的矩形仍为100px,100px呢？

方法1：

直接在<canvas>中设置宽高分别为300px,300px(注意不是设置style属性，而是直接设置width,height属性)，用fillRect(0,0,100,100)绘制矩形。

方法2：

知道了画布拉伸的原理，我们可用css设置宽高分别为300px,300px,（宽度不变，高度较原始高度拉长一倍），用fillRect(0,0,100,50)绘制矩形。（矩形高度100px缩减一倍，再拉长一倍仍为100px）。

这篇好文章是转载于：学新通技术网

解决fillRect方法画矩形变形的问题

一、问题发现

二、原因

该图片来自菜鸟教程对<canvas>元素的介绍：

为了更加方便大家的理解，我用分别三个画布画长100px，宽100px的正方形为例:

解释：

三、解决问题

方法1：

方法2：

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐