时间戳

首页 > 解决方案 > 为什么我的画布在将 html 转换为 DOM 调用时会自行缩放？

javascript - 为什么我的画布在将 html 转换为 DOM 调用时会自行缩放？

问题描述

在重构我的代码以避免调用该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，是否有一组更好的可变参数用于发布到堆栈交换？

标签： javascripthtmlcssgoogle-chromecanvas

解决方案

问题是，您是通过样式标签设置元素的宽度和高度。然而，这会导致画布元素出现问题。通常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();});
}

推荐阅读