5

今日、Chrome バージョン 17 から Chrome: 18.0.1025.142 にアップグレードしました。

私が取り組んでいる Web アプリの 1 つに、読み込み時に表示され、スクロールを開始すると消える奇妙な青いレイヤーがあることに気付きました。

これをJSの次の行まで追跡しました。

                context.canvas.width = canWidth;
                context.canvas.height = canHeight;

canWidth と canHeight は動的に生成されます。

これらの行をコメントアウトすると、青いレイヤーのレンダリングが停止しますが、動的に生成された値を使用してキャンバスの幅/高さを制御する必要があるため、これは修正ではありません。

また、context.canvas.width と context.canvas.height を 600 にハード コーディングしようとしましたが、これもブルー レイヤーの問題を引き起こしました。

これは、以前のバージョンの Chrome では問題ではありませんでした。また、FireFox でも問題はありません。

問題が何であるかについて何か提案はありますか?

編集：

上記が存在するコードのブロックは次のとおりです (nodeLeft と nodeTop は他の場所で生成されます)。

                context.clearRect ( 0 , 0 ,canWidth, canHeight );
                context.canvas.width = canWidth;
                context.canvas.height = canHeight;                                 
                context.beginPath();
                context.moveTo(x, y);
                context.lineTo(nodeLeft, nodeTop);
                context.strokeStyle = "#000000";
                context.lineCap = "round";
                context.stroke();
4

2 に答える 2

1

提供した2行よりも多くのコードを投稿できますか？幅/高さを設定した場所以上のものだと思います。

しばらくの間、オンとオフをいじくり回してきた描画アプリケーションがあり、ほとんど同じことをしています。context.scale(0,0);唯一の違いは、幅と高さを設定する前に呼び出すことです。青いオーバーレイを使用したGoogleChromeのどのバージョンでも問題はありません。幅と高さを設定する前に、コンテキストのスケール値を変更している可能性がありますか？

たとえば、これが私が持っているもので、フルドキュメントの描画領域のドキュメントの幅/高さにキャンバスを設定します。

context.scale(0,0);
context.canvas.width = $(document).width();
context.canvas.height = $(document).height();

編集：青いオーバーレイをテストして、それがブラウザなのかコードなのかを確認したい場合は、私のいじくり回すサイトはhttp://drawcomix.comにあります。

編集：あなたの追加のコメントに基づいて...

キャンバスをクリアする最良の方法は高さ/幅を設定することであると示唆するチュートリアルをWebで見ました。それは完全に真実ではありません。ドキュメントの読み込みでは、これを行うのが最も速くて簡単な方法かもしれませんが、マウスの動きでは、おそらく次のようなことをしたほうがよいでしょう。

context.save();
context.setTransform(1,0,0,1,0,0);
context.clearRect(0,0,width,height); // width/height of canvas
context.restore();

setTransformキャンバスで変換を実行していない場合は、必要ない場合があります。

この解決策はProHTML5プログラミング（Apress）で見つけたと思いますが、よくわかりません。

于 2012-04-03T20:23:31.267 に答える
0

編集：

わかりました、私はそれを手に入れました。一部の AMD グラフィック カードに問題があるようです。触媒コントロールセンターでクロムのハイパフォーマンスモードをオフにすることができました。それは私にとって厄介なことのほとんどを修正しました...次のバージョンで修正されることを願っています.

詳細については、http ://code.google.com/p/chromium/issues/detail?id=121658 を参照してください。

これは解決策ではありませんが、私は同じ問題に直面しており、気が狂っています。私はそれを釘付けにしようとしています。さまざまなマシンでさまざまなブラウザーをテストしました。

問題:

  • 青いレイヤー (Chrome が最大化されていない場合にのみ表示されます)
  • y スクロールバーの位置がずれています (タブを切り替えた場合にのみ表示されることがあります)
  • 歪んだ形状。キャンバスのサイズや描画される画像・形状は、chrome と他のブラウザによって異なります。つまり、Chromeではキャンバス/シェイプが小さくなり、ほとんど幅が縮小されます。

結論 1: Chrome 18.xx を搭載したすべてのマシンで発生するわけではないようです。ハードウェアの問題のようですが、実際にはさらに制限することはできませんでした。

結論 2: キャンバスのサイズを高さ/幅 200 に設定すると、問題は発生しません。200 より高く設定すると、キャンバス/長方形が変形し、その他の問題が発生します。

結論 3: 何かがキャンバスに描画されているか、何かが設定されている場合 (つまり、fillStyle) にのみ問題が発生します。

ここで私が使用したテストスニペット:

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas>
...
ctx.fillRect (10, 10, 55, 50);
于 2012-04-17T22:45:58.430 に答える