1

JavaScript を使用して、Web サイトの 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およびにそれぞれ変更すると、キャンバスは長方形を正しい位置に描画しますが、Web サイトの可視領域にのみ描画します (明らかに)。canvas.heightwindow.innerWidthwindow.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 を設定するときは、後で >0 を設定する場合に備えて、"px" を含む文字列を渡したい場合があります。

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

.pointerEvents='none' は、ほとんどのブラウザーでサポートされています (ただし、IE<11 ではサポートされていません)。

于 2013-11-07T21:23:05.293 に答える