关于使用canvas时fillRect添加矩形高度问题

最近在自学canvas的时候遇到一个问题，是关于在一块画布上面使用fillRect函数添加一个矩形的时候产生的高度问题。首先我们来看代码

<canvas id="test1" style="width: 500px; height: 500px; background: yellow;"></canvas>```

我在这里，在页面上创建了一块画布。宽度为500px,高度为500px,展示的效果如下：

然后我使用JS对其进行矩形的添加

    var a=document.getElementById("test1")var ctx1=a.getContext("2d");ctx1.fillRect(0,0,100,100)

在这里我们可以看到我是通过fillRect进行矩形的添加，起点坐标（0,0）结束坐标(100,100),（当然这里对参数的理解可能有误，希望有更好见解的前辈及时纠正)，然后我们运行结果展示：

我们可以发现，并不是说像我们想象的那样，生成的是一个正方形。所以我在这里也是百思不得其解。后来经过资料的查证后发现，canvas是具有一个默认的宽高比例（即300：150），而我们这里面的行内样式中的宽高虽然让canvas画布变大了，但是并没有改变它的比例。所以我们虽然是（0,0）到（100,100），但是实际上因为画布比例是二比一，所以我们的矩形的宽高也被压缩成了二比一。也就是说，实际上这一行画布的代码应该是：

<canvas width="300" height="150" id="test1" style="width: 500px; height: 500px; background: yellow;"></canvas>

而我们如果将后面的style里面的宽高删除后，则呈现出这样的效果：

此时我们的添加的矩形的比例就对了。那么我还想让其宽高皆为500应该如何做，只需要直接修改width和height的值就行，但是需要注意的是，这里的width和height是指的画布自身的属性而不是样式中的属性值。

<canvas width="500" height="500" id="test2" style="background: red;"></canvas>

这样的话即可，为了更好的对比，我将两种同时展示出来。主要代码如下

    <canvas id="test1" style="width: 500px; height: 500px; background: yellow;"></canvas><canvas width="500" height="500" id="test2" style="background: red;"></canvas>

    var a=document.getElementById("test1")var ctx1=a.getContext("2d");ctx1.fillRect(0,0,100,100)var b=document.getElementById("test2");var ctx2=b.getContext("2d");ctx2.fillRect(0,0,100,100)

但是还存在一个问题，就是我插入矩形中，没有单位的100代表的距离是多少，而这里虽然比例相同了，但是宽度应该都是100，为何两个中的宽度又不太一样。希望有知道的前辈进行解答。十分感谢。

关于使用canvas时fillRect添加矩形高度问题相关推荐

在Canvas中绘制圆角矩形
问题的提出要在Canvas中绘制一个矩形,使用strokeRect或fillRect函数即可. var canvas = document.getElementById("canvas&q ...
canvas绘制多个矩形实现热区图功能
热区图功能: 在运用后台上传一张背景图,在背景图上框选指定区域,配置对应的跳转链接或领券信息小程序端判断用户点击位置是否在矩形框选范围内,如果在指定范围内,根据后台配置的功能进行页面跳转或领券. 运 ...
VUE3 实现前台图片标注添加矩形框、图片放大、缩小、鼠标滚轮缩放
VUE3 实现前台图片标注功能包括: 鼠标左键拖动添加矩形框标记区域,鼠标点击已绘制的矩形: 选中矩形,并绘制不同选中效果: 鼠标在已绘制的矩形中按住左键拖动,选中并移动矩形:选中矩形后鼠标在选中矩 ...
用HTML5 Canvas为网页添加动态波浪背景
查看所有代码请去Github 本文出自 "UED" 博客:http://5344794.blog.51cto.com/5334794/1430877 <!DOCTYPE ht ...
用Canvas为网页添加动态背景
用Canvas为网页添加动态背景作者:uedtianji 最近刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务.考虑到页面只在手机中浏览,而且手机对canvas的支持又非常好, ...
R统计绘图-corrplot热图绘制细节调整2(更改变量可视化顺序、非相关性热图绘制、添加矩形框等)
上一篇文章推送的是怎样调整corrplot热图的可视化参数,以修改字符和图例位置,数据可视化形式和字符小大和颜色等这篇是一个补充部分,记录怎样修改参数以变量排序方式和突出部分数据.本流程还是使用R统计 ...
【Python气象绘图临摹】图像绘制（下）:地理子图GeoAxes、xy轴设置、应用ncl色阶colormap、各标题、海岸线、添加文本、添加矩形框
文章目录前言 plt.fig.ax.三者绘制区别: GeoAxes地图投影:绘图投影和数据投影 x轴.y轴设置: 多个子图之间的间距调节: 图上添加文本.矩形框: python中ncl色阶color ...
利用Canvas制作旋转的矩形
利用Canvas制作旋转的矩形 HTML5 Canvas API提供了强大的图形绘制功能,包括形状.颜色.线条样式等.在本文中,我将展示如何使用Canvas API创建一个旋转的矩形. 一.HTML结 ...
问题.NET--win7 IIS唯一密钥属性“VALUE”设置为“DEFAULT.ASPX”时,无法添加类型为“add”的重复集合...
问题现象:.NET--win7 IIS唯一密钥属性"VALUE"设置为"DEFAULT.ASPX"时,无法添加类型为"add"的重复集合问 ...
IDEA创建方法时快速添加注释
为了方便开发时提高代码的可读性,那么在创建方法时快速添加注释就很有必要. 1.setting => Edit => Live Templates 2. 新建一个组:选择第二个:Templa ...

关于使用canvas时fillRect添加矩形高度问题

关于使用canvas时fillRect添加矩形高度问题相关推荐

最新文章

热门文章