gpt4 book ai didi

javascript - 使用 ID 选择器定义宽度和高度时,HTML5 Canvas 表现不一致

转载 作者:行者123 更新时间:2023-11-28 02:19:18 24 4
gpt4 key购买 nike

我的 html 文件非常简单:

<body>
<canvas id="canvas" width="900" height="400"></canvas>
<button onclick="DrawSVG()">Draw SVG</button>
</body>

单击按钮时,我使用 canvg.js 在 Canvas 上绘制 SVG

var opts = {
ignoreMouse: false,
ignoreClear: true,
ignoreDimensions : true,
offsetX: 0,
offsetY: 0
};
canvg(canvas, "face.svg", opts);

脸.svg:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<rect x="0" y="0" width="80" height="80" rx="6" fill="blue" stroke="red" stroke-
width="1px" fill-opacity="0.7" />
</svg>

看来是正确的。

但是当我在头部定义宽度和高度时:

<style type="text/css">
#canvas {
width: 900px;
height: 400px;
}

Canvas 上的 svg 比以前大 4 倍。有什么区别?

最佳答案

解释在这里:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.

(我从 here! 借用了这个,因为它值得重复。)

关于javascript - 使用 ID 选择器定义宽度和高度时,HTML5 Canvas 表现不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15915763/

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