css画布尺寸怎么调,在CSS中设置画布'宽度/高度'会导致令人惊讶的行为

淡淡的烟草味﹌ 2022-09-03 01:29 139阅读 0赞

我有两个HTML canvas元素，我在它们上画了几行。

这两个画布基本相同，只是在一个我使用标签属性(canvas-1)指定了宽度和高度，另一个我在CSS(canvas-2)中指定了宽度和高度。 / p>

我发现当我记录宽度和高度时(我在下面的drawDividers中执行此操作)，canvas-2的高度为150而不是300，正如我预期的那样。我发现令人惊讶的是，即使height非常错误，除了模糊之外，这些线条基本上都是我预期的。这里发生了什么？是否有一个简单的心理模型我可以采用HTML / CSS / canvas来解释这个？

我在Windows上使用Chrome，以防相关。

![X5o6b.png][]

HTML

\_\_

CSS

\#canvas-1 \{

outline-style: solid;

\}

\#canvas-2 \{

width: 300px;

height: 300px;

outline-style: solid;

\}

的Javascript

function drawDividers(eid) \{

var canvas = document.getElementById(eid);

var width = canvas.width;

var height = canvas.height;

console.log(eid, width, height);

var ctx = canvas.getContext('2d');

ctx.lineWidth = 1;

for (var i = 1; i <= 2; i++) \{

ctx.moveTo(i\*width/3, 0.1\*height);

ctx.lineTo(i\*width/3, 0.9\*height);

ctx.stroke();

ctx.moveTo(0.1\*width, i\*height/3);

ctx.lineTo(0.9\*width, i\*height/3);

ctx.stroke();

\}

\}

drawDividers('canvas-1');

drawDividers('canvas-2');

[X5o6b.png]: https://i.stack.imgur.com/X5o6b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关 sql 注射_令人惊讶的注射

sql 注射所以，我欠吉姆道歉。他编写了一个有效的模拟和JUnit测试，我在回顾中告诉他，我认为它没有达到他的预期。当我错了时，这种情况对我来说[就像是一个错误][Li

喜欢ヅ旅行/ 2023年02月25日 04:58/ 0 赞/ 9 阅读

相关 css高度等于宽度

代码 <div class="a"></div> .a{ width: 50%; height:0; padding-bottom:50%; back

雨点打透心脏的1/2处/ 2023年02月13日 11:07/ 0 赞/ 13 阅读

相关 css 高度宽度计算属性_最大宽度（CSS属性）

css 高度宽度计算属性描述 (Description) This property sets the maximum content width of a bloc

逃离我推掉我的手/ 2022年12月03日 11:26/ 0 赞/ 229 阅读

相关 php画布颜色大全,PHP中的画布详解

本文主要和大家分享PHP中的画布详解，PHP中的图像处理技术GD，希望能帮助到大家。创建新画布--资源型数据(可以操作图像资源) ImageCreate(画布宽，画布高)

清疚/ 2022年11月12日 13:49/ 0 赞/ 140 阅读

相关 css画布尺寸怎么调,在CSS中设置画布'宽度/高度'会导致令人惊讶的行为

我有两个HTML canvas元素，我在它们上画了几行。这两个画布基本相同，只是在一个我使用标签属性(canvas-1)指定了宽度和高度，另一个我在CSS(canvas-2

淡淡的烟草味﹌/ 2022年09月03日 01:29/ 0 赞/ 140 阅读

相关调整合适的画布尺寸（游戏）

1、处理尺寸调整 <!DOCTYPE html> <html> <head> <meta charset

Love The Way You Lie/ 2022年08月21日 12:59/ 0 赞/ 176 阅读

相关创建画布

在开发Web项目时，图片是前台页面不可缺少的组成部分，传统方式在页面中加入图片一般通过HTML语言中的<img>标签来实现；在PHP语言中为了提升页面的传输速率、便于对数据统

阳光穿透心脏的1/2处/ 2022年07月24日 07:03/ 0 赞/ 175 阅读

相关 CSS3 Canvas如何巧妙实现空白画布

接上一篇，在用canvas实现验证码的时候原先的代码是： context.fillRect(0, 0, canvas.width, canvas.height);

清疚/ 2022年06月15日 05:51/ 0 赞/ 274 阅读

相关 css设置高度

html: <img src="/static/manager/home/img/zt.png" alt="" class="zt"> css: .zt

末蓝、/ 2021年09月23日 23:00/ 0 赞/ 328 阅读

相关 Java 中一个令人惊讶的 BUG

![format_png][]作者：海纳链接：zhuanlan.zhihu.com/p/88555159 今天分享一个JDK中令人惊讶的BUG，这个BUG的神奇之处在于，

雨点打透心脏的1/2处/ 2021年08月27日 11:25/ 0 赞/ 329 阅读