JavaScript 中的函数 initCanvas() 正在绘制矩形，但位置不正确

Question

这是 canvas 元素的 JavaScript。填充和绘制矩形的代码一定有问题：

function initCanvas() {
var ctx = document.getElementById("my_canvas").getContext("2d");
ctx.canvas.addEventListener("mousemove", function(event) {
    var mouseX = event.clientX - ctx.canvas.offsetLeft;
    var mouseY = event.clientY - ctx.canvas.offsetTop;
    var status = document.getElementById("status");
    status.innerHTML = mouseX + " | " + mouseY;
});

ctx.canvas.addEventListener("click", function(event) {
    var mouseX = event.clientX - ctx.canvas.offsetLeft;
    var mouseY = event.clientY - ctx.canvas.offsetTop;
    //alert(mouseX + " | " + mouseY);
    ctx.fillStyle = "orange";
    ctx.fillRect(mouseX, mouseY, 30, 30);
});
}

window.addEventListener("load", function(event) {
    initCanvas();
});

这是带有 canvas 元素的 HTML

<body>
    <canvas id="my_canvas"></canvas>
    <h2 id="status">0 | 0</h2>
</body>

这是给 canvas 一个高度和宽度的 CSS

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

h2 {
    color: black;
    font-family: Varela Round;
}

Answer 1

您需要设置 canvas 尺寸。在 HTML5 Canvas 100% height and width.

阅读更多内容

var canvas = document.getElementById("my_canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

但是您还必须为实际 window 大小实施调整大小事件。

window.addEventListener("resize", function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

工作示例：

var canvas = document.getElementById("my_canvas");

function initCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var ctx = canvas.getContext("2d");
    ctx.canvas.addEventListener("mousemove", function (event) {
        var mouseX = event.clientX - ctx.canvas.offsetLeft;
        var mouseY = event.clientY - ctx.canvas.offsetTop;
        var status = document.getElementById("status");
        status.innerHTML = mouseX + " | " + mouseY;
    });

    ctx.canvas.addEventListener("click", function (event) {
        var mouseX = event.clientX - ctx.canvas.offsetLeft;
        var mouseY = event.clientY - ctx.canvas.offsetTop;
        //alert(mouseX + " | " + mouseY);
        ctx.fillStyle = "orange";
        ctx.fillRect(mouseX, mouseY, 30, 30);
    });
}

window.addEventListener("load", function (event) {
    initCanvas();
});

window.addEventListener("resize", function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* set to % */
}

h2 {
    color: black;
    font-family: Varela Round;
}

<canvas id="my_canvas" width="1000" heigth="1000"></canvas>
<h2 id="status">0 | 0</h2>

Answer 2

仅设置 CSS 中 canvas 的 width 和 height 不足以告诉 context 它的尺寸。默认情况下，canvas 的 width 为 300，height 为 150。该坐标系是您调用 ctx.fillRect 时使用的坐标系，也是它全部伸展的原因.

您需要将 canvas 尺寸设置为 JavaScript。尝试向 window 添加 resize 侦听器，并将 canvas 的 width 和 height 设置为 JavaScript。

window.addEventListener('resize', resizeCanvas);

// call it initially because 'resize' events won't trigger on page load
resizeCanvas();

function resizeCanvas() {
        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight;
}

这将更新上下文维度，您实际上是根据 window 坐标绘制的。

JavaScript 中的函数 initCanvas() 正在绘制矩形，但位置不正确

My function initCanvas() in JavaScript is drawing the rectangles but not in the correct position

html

javascript

css

drawing

html5-canvas