gpt4 book ai didi

javascript - HTML Canvas : difference between width/height attribute and width/height style

转载 作者:行者123 更新时间:2023-11-28 16:31:42 26 4
gpt4 key购买 nike

<分区>

我在调整 Canvas 大小方面看到了各种答案,但无法理解我面临的问题。以下是在我的网络应用程序上呈现的 Canvas 元素。

Before Rendering: 

<canvas id="g_5" resize></canvas>

After Rendering:

<canvas id="g_5" resize width="1076" height="306" style="-webkit-user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1148.38px; height: 300px;"></canvas>

我按如下方式设置 Canvas 的高度和宽度:

        var canvas = document.getElementById(canvasId);
var context = canvas.getContext('2d');
var width = <someWidth>; //=1076 in this case
var height = <someHeight>; //=306 in this case
canvas.width = width;
canvas.height = height;

执行此操作后,样式中的宽度/高度会取代属性宽度/高度,因此 Canvas 会使用样式的高度/宽度。

我的问题是:

  1. 为什么有两种不同的宽度/高度?
  2. 如何设置它们具有相同的值
  3. 如果我从 canvas 元素中删除 resize 属性, Canvas 大小将保持默认大小。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com