5

キャンバス要素上の回転した長方形の描画、消去、および再描画がMacのグーグルクロームで機能しない理由のために、私は長い間探していました。

キャンバスにホバーオーバーレイをレンダリングしたいので、これが必要です。

コードを表すフィドルを作成しました：リンク

HTML：

<canvas id="canvas"  width="400" height="165" style="left: 0px; top: 0px; background-color:red;"></canvas>

Javascript：

var canvas =null;
var ctx;
var target;

$(function() {
        canvas=document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        target = { h:81, id:"i1_2", isempty:false, r:-11.64, w:60, x:143, y:19, zindex:2};
});

function drawRectangle() {
        ctx.save();
        ctx.translate(target.x, target.y);
        ctx.fillStyle = "green";
        ctx.strokeStyle = "blue";
        ctx.globalAlpha = 0.40;
        ctx.rotate(target.r / 180 * Math.PI); //NO Rotation => It works!
        ctx.fillRect(0,0,target.w,target.h);
        ctx.restore();   
}

function clearRectangle() {
    ctx.clearRect(0,0,400,165);
}

これは、Mac上のChromeを除く、WindowsおよびMac上のすべてのブラウザで正常に機能します。

行をコメントアウトするとき

// ctx.rotate(angle);

長方形はキャンバスに描かれています。（もちろん回転なし）

私は何か間違ったことをしましたか？それとも、これはChromeのバグですか？

編集：このテストページはMacのChromeで動作するため、おそらくChromeのバグではありません。

http://www.html5canvastutorials.com/demos/advanced/html5_canvas_transform_rotate/

編集2：私はこれについてさらに調査を行っており、この問題がログに記録されていることがわかりました：リンク

私はそこにテストフィドルを取り、回転するキャンバス要素を使用してさらにいくつかのテストを追加しました。リンク そこに情報を読むと、小さなキャンバスに描画すると問題が「解決」されます。

ここで私のフィドルの結果を参照してください： 悪い結果

上記のフィドルのキャンバスのサイズを変更すると、キャンバスが1ピクセル小さくなります。その後、結果は大丈夫です。

良い結果

最終的な結論：回転した長方形を一度描くことができるようです。しかし、clearRectメソッドを使用してキャンバスを消去すると、長方形を再度描画できなくなります。これは、キャンバスのサイズが十分に大きい場合にのみ発生します。（65600pxより大きい）

Macでクロムを使用してキャンバスに長方形を描画および再描画できるように、これに対する解決策を知っている人はいますか？

私はこれに夢中になっています。

4

1 に答える 1

1

これまでに行った調査から判断すると、これはブラウザのバグであることがすでにわかっているため、自分で修正することはできません。ただし、互いに隣接する小さなキャンバスを使用し、それぞれのキャンバスに異なるオフセットで描画して、シェイプのエッジを揃えることで、問題を回避できます。

コードの観点からは必ずしも良いとは言えませんが、視覚的には同じように見え、バグを回避できるはずです。

私はあなたのフィドルをデモンストレーションするために修正しました：http：//jsfiddle.net/z8f2f/35/

于 2012-10-15T02:28:51.777 に答える