Question

我试图制作一个响应式画布，但是当我使用设备工具在chrome中调整屏幕大小时，它会破坏isPointInPath。即使当我不调整画布大小并只是手动滚动时，它仍然会损坏。似乎无法通过触摸事件检测形状

^.*CONTENT.*$\n

Answer 1

我刚刚进行了测试，在我的情况下，它似乎可以正常工作...

这是我的样品

<!DOCTYPE html>
<style>body{margin:0}</style>
<canvas id="can"></canvas>

<script>
var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');

function resizeCanvas() {
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    drawDots();
}

function drawDots() {
    var prop = canvas.width / 10
    var scale = 20 * prop / 50
    for (var x = prop; x < canvas.width - prop*1.5; x += prop)
        for (var y = prop; y < canvas.height; y += prop)
            ctx.rect(x, y, scale, scale);
    ctx.stroke();
}

canvas.onmousemove = function(e) {
    if (ctx.isPointInPath(e.clientX, e.clientY)) {
        r = 10
        ctx.fillRect(e.clientX - r/2, e.clientY - r/2, r, r );
    }
}

window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
</script>

没有完整的代码来重现您的问题，很难对确切的问题进行故障诊断。

当画布调整大小或滚动时，isPointInPath中断

1 个答案: