Javascript 如何在正确的位置绘制画布元素？

我正在使用javascript在网站中的DOM元素周围绘制一个矩形

问题是矩形绘制在错误的位置

我知道画布就像真实的画布一样工作，所以在填充画布之前，你必须“预先绘制”所有内容，否则元素将按照你绘制它们的顺序彼此重叠

这就是为什么我要在循环之外定义画布和上下文

这是我的代码：

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.globalAlpha = 0.5;

    //Set canvas width/height
    canvas.style.width='100%';
    canvas.style.height='100%';

    //Set canvas drawing area width/height
    canvas.width = document.width;
    canvas.height = document.height;

    //Position canvas
    canvas.style.position='absolute';
    canvas.style.left=0;
    canvas.style.top=0;
    canvas.style.zIndex=100000;
    canvas.style.pointerEvents='none'; //Make sure you can click 'through' the canvas
    document.body.appendChild(canvas); //Append canvas to body element


var listingsRect = Array.prototype.map.call(document.querySelectorAll('.rc'), function(e) {
        return e.getBoundingClientRect();
    });
listingsRect.forEach(function(listingRect) {
    var x = listingRect.left;
    var y = listingRect.top;
    var width = listingRect.width;
    var height = listingRect.height;

    //Draw rectangle
    context.rect(x, y, width, height);
    context.fillStyle = 'yellow';
    context.fill();
});

然而，当我改变

canvas.width

和

canvas.height

分别到

window.innerWidth

和

window.innerHeight

，然后canvas在正确的位置绘制矩形，但它仅在网站的可见区域绘制矩形（显然）

谁能告诉我我的代码有什么问题吗

这是一个JS垃圾桶：

上下文中的x，y。rect（x，y，width，height）与画布元素相关，而不是与浏览器窗口相关。

因此，如果您的画布元素绝对位于50,75，并且您希望在窗口位置110125处绘制一个矩形，那么您可以如下所示绘制矩形：

context.rect( 110-50, 125-75, width, height );

还有几件事：

如果设置画布元素的宽度/高度，然后绝对定位，则不需要canvas.style.width/height

document.width/height已弃用（IE中不支持（&T）。改用这个：

//Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

设置style.left/top时，您可能希望传递一个带有“px”的字符串，以防以后设置>0

canvas.style.left="0px";
canvas.style.top="0px";

.pointerEvents='none'在大多数浏览器中都受支持（但在IE中不支持）。rect（x，y，width，height）与画布元素相关，而不是与浏览器窗口相关。

因此，如果您的画布元素绝对位于50,75，并且您希望在窗口位置110125处绘制一个矩形，那么您可以如下所示绘制矩形：

context.rect( 110-50, 125-75, width, height );

还有几件事：

如果设置画布元素的宽度/高度，然后绝对定位，则不需要canvas.style.width/height

document.width/height已弃用（IE中不支持）（&T）。请改用此选项：

//Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

设置style.left/top时，您可能希望传递一个带有“px”的字符串，以防以后设置>0

canvas.style.left="0px";
canvas.style.top="0px";

---

大多数浏览器都支持.pointerEvents='none'（但不是在IEI中，我现在不担心跨浏览器兼容性，因为我使用无头浏览器来运行此脚本，所以只要它们在PhantomJS中工作，我就可以接受，但感谢大家提醒！另一方面，如果我的视口不够大，无法看到整个网页怎么办？如果document.width/height不推荐使用，怎么办我是否能够在JS找到的每个元素（包括不可见的元素）周围绘制一个矩形。您可以使用window.innerWidth而不是document.width来获取包括任何滚动条在内的视口宽度。您完全可以定位画布，即使它位于视口之外。提示：如果您正在调整大小，则canvas.width/he中的任何更改Light将清除画布，因此在调整大小后必须重新绘制矩形。提示：不要使用css调整画布大小，因为像素将被“拉伸”，从而导致图像失真（如果你只是画一个单色的矩形，这不是问题，但是图形/图像会失真。我现在不担心跨浏览器的兼容性，因为我使用的是无头浏览器来运行这个脚本，所以只要它们在PhantomJS中工作，我就可以了，但是谢谢你的提醒！另一方面，如果我的视口不大呢足够查看整个网页吗？如果document.width/height被弃用，我如何才能在JS找到的每个元素（包括不可见的元素）周围绘制一个矩形。您可以使用window.innerWidth而不是document.width来获取包括任何滚动条在内的视口宽度。您完全可以定位画布，即使其在视口外部。提示：如果要调整画布的大小，则canvas.width/height中的任何更改都将清除画布，因此在调整大小后必须重新绘制矩形。提示：不要使用css调整画布的大小，因为像素将“拉伸”，从而导致图像失真（如果您只是绘制单色矩形，这不是问题，但图形/图像会扭曲。