1

我正在使用 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 容器：

http://jsbin.com/elUToGO/1

4

1 回答 1

1

context.rect(x,y,width,height)中的 x,y是相对于画布元素而不是相对于浏览器窗口。

因此，如果您的画布元素绝对定位在 50,75 并且您想要在窗口位置 110,125 的矩形，您可以像这样绘制矩形：

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 时，您可能希望传递一个带有“px”的字符串，以防您稍后设置 >0。

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

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

于 2013-11-07T21:23:05.293 回答