javascript - 在javascript中的函数内设置 Canvas 位置

Question

我在使用 javascript 定位 Canvas 时遇到了一些问题。 我的操作流程如下:

1. 向服务器发送 Ajax 请求
2. 收到响应后，我从一个 JSON 值中获取我的数据，并对这些数据调用一个函数
3. 该函数与 simpleheat 一起运行，以便在 Canvas 上绘制覆盖原始图像的热图。

这是 HTML

<div id="rightPanel" class="col-md-9">
    <img id="worldMap" width="800" height="600" />
    <canvas class="coveringCanvas" id="heatmap" />
</div>

类coveringCanvas是

    .coveringCanvas {
    position: absolute;
}

我的 AJAX 请求:

function OnUpdateClick() {
    begin = beginDate.GetDate().toLocaleString("it-IT");
    end = endDate.GetDate().toLocaleString("it-IT");
    if (begin == null || end == null) {
        alert("Immettere delle date!")
    } else {
        $.post("/Heatmap/getHeatmap",
            { beginDate: begin, endDate: end },
            function (data) {
                map = data["mapImage"];
                var img = document.getElementById('worldMap');
                img.src = arrayBufferDataUri(map);
                positions = data["positions"];
                drawPoints(positions);
            });
    }

和 DrawPoints 函数:

 function drawPoints(data) {
    var img = document.getElementById('worldMap');
    var canvas = document.getElementById('heatmap');
    console.log("Image x: " + img.x)
    console.log("Image y: " + img.y)
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.style.left = img.x + "px";
    canvas.style.top = img.y + "px";
    simpleheat('heatmap').data(data).radius(30,25).draw();
}

现在，为我的 canvas 设置 height 和 width 没问题了。

设置top和left是。

如果我在浏览器 (Firefox Quantum) 中从 javascript 控制台重复相同的指令，则定位工作完美无缺。

如果我记录 img.x 和 img.y 值，它们在函数中也是正确的，问题似乎是分配给 canvas.

它可以是什么？

Answer 1

也许你可以设置 Style position Property在 left 和 top 之前的函数内部？

例子:

 function drawPoints(data) {
    var img = document.getElementById('worldMap');
    var canvas = document.getElementById('heatmap');
    console.log("Image x: " + img.x)
    console.log("Image y: " + img.y)
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.style.position = 'absolute';  // Right Here!
    canvas.style.left = "15px";
    canvas.style.top = "15px";
    simpleheat('heatmap').data(data).radius(30,25).draw();
}