为啥我的画布在将 html 转换为 DOM 调用时会自行缩放? [复制]
Posted
技术标签:
【中文标题】为啥我的画布在将 html 转换为 DOM 调用时会自行缩放? [复制]【英文标题】:Why would my canvas scale itself in converting html to DOM calls? [duplicate]为什么我的画布在将 html 转换为 DOM 调用时会自行缩放? [复制] 【发布时间】:2021-04-03 04:07:21 【问题描述】:在重构我的代码以避免调用innerhtml
成员时,出现了一个新错误。我只将 html 字符串转换为 DOM 调用。铬检查器中没有错误。我正在使用 mercurial,旧版本仍然有效。我四处寻找:
alert(ctx.getTransform());
返回1,0,0,1,0,0
,这是身份转换。但是我的画布仍然缩放错误。除了基本的线条和笔画成员之外,我什么都不叫。
function buildColorTool()
var pick = document.createElement("DIV");
var canvas = document.createElement("canvas");
canvas.style.width = "200px";
canvas.style.height = "200px";
canvas.id = "wheelCanvas";
pick.appendChild(canvas);
document.getElementById("toolWindow").appendChild(pick);
坏了,但是:
function buildColorTool()
let toolWindow = "<div class=\"toolDialogue\">";
toolWindow += " <div id=\"colorPicker\">";
toolWindow += " <canvas id=\"wheelCanvas\" width=\"200\" height=\"200\"></canvas>";
toolWindow += " </div>";
toolWindow += " </div>";
document.getElementById("toolWindow").innerHTML = toolWindow;
有效。
我使用了hg diff -c 25 ./script.js > changes.txt
,是否有更好的可变参数集来发布到堆栈交换?
【问题讨论】:
请发minimal reproducible example,或者至少我们可以直接使用的代码。 使用canvas.width = 200;
(高度相同)而不是设置样式,否则您将得到一个 300x150 的画布扭曲为 200x200。
谢谢,这是我的解决方案@Chris G。我现在将尝试使最小可重现。
复制:Canvas width and height in HTML5
【参考方案1】:
问题是,你通过它的样式标签来设置元素的宽度和高度。然而,这 causes problems 带有画布元素。一般情况下height和width属性用于实际尺寸,CSS宽度/高度用于缩放。
解决方案 改变
function newColorCanvas()
var pick = document.createElement("DIV");
var canvas = document.createElement("canvas");
canvas.style.width = "200px";
canvas.style.height = "200px";
canvas.id = "wheelCanvas";
canvas.innerText = "Canvas tag not supported";
pick.appendChild(canvas);
var select = document.createElement("P");
select.id = "colorSelection";
select.innerText = "HSL: 135, 75, 50";
pick.appendChild(select);
document.getElementById("toolWindow").appendChild(pick);
paintCanvas(135,75,50);
canvas.addEventListener('click', function() updateCanvas(););
到
function newColorCanvas()
var pick = document.createElement("DIV");
var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
canvas.id = "wheelCanvas";
canvas.innerText = "Canvas tag not supported";
pick.appendChild(canvas);
var select = document.createElement("P");
select.id = "colorSelection";
select.innerText = "HSL: 135, 75, 50";
pick.appendChild(select);
document.getElementById("toolWindow").appendChild(pick);
paintCanvas(135,75,50);
canvas.addEventListener('click', function() updateCanvas(););
【讨论】:
如果问题被证明是重复的,请不要回答,而是这样标记。您当然可以随时发布 cmets 为 OP 提供额外帮助。以上是关于为啥我的画布在将 html 转换为 DOM 调用时会自行缩放? [复制]的主要内容,如果未能解决你的问题,请参考以下文章