Question

我正在使用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，然后画布在正确的位置绘制矩形，但它只会在网站的可见区域绘制（显然）。

有人可以告诉我我的代码有什么问题吗？

这是一个JS bin：

http://jsbin.com/elUToGO/1

Answer 1

context.rect（x，y，width，height）中的x，y 相对于canvas元素而不是浏览器窗口。

因此，如果你的canvas元素绝对定位在50,75，并且你想在窗口位置110,125处使用rect，你会像这样画出你的矩形：

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

其他一些事情：

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

不推荐使用

document.width / height（在IE中不支持）。请改用：

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

设置style.left / top时，如果稍后设置＆gt; 0，则可能需要传递带有“px”的字符串。

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

.pointerEvents ='none'在大多数浏览器中都受支持（但在IE＆lt; 11中不支持）

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

1 个答案: