猿问

为什么我的画布在将 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,是否有更好的一组用于发布到堆栈交换的多变参数?


翻过高山走不出你
浏览 111回答 1
1回答

慕雪6442864

问题是,您通过元素的样式标签设置元素的宽度和高度。然而,这会导致画布元素出现问题。通常,高度和宽度属性用于实际大小调整,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();});}
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答