4

HTMLキャンバスを使用して描画アプリケーションを作成しています。mousemove描かれた線を滑らかにするために、各イベントの後に一連の2次曲線を塗りつぶしています。

    ctx.beginPath()
    ctx.moveTo(mx1-halfLastWidth*sin(angle), my1-halfLastWidth*cos(angle))
    ctx.quadraticCurveTo(mx1-lastWidth*cos(angle), my1+lastWidth*sin(angle),
      mx1+halfLastWidth*sin(angle), my1+halfLastWidth*cos(angle))
    ctx.quadraticCurveTo(xl+halfMidWidth*sin(angle), yl+halfMidWidth*cos(angle),
      mx2+halfCurrentWidth*sin(angle), my2+halfCurrentWidth*cos(angle))
    ctx.quadraticCurveTo(mx2+currentWidth*cos(angle), my2-currentWidth*sin(angle),
      mx2-halfCurrentWidth*sin(angle), my2-halfCurrentWidth*cos(angle))
    ctx.quadraticCurveTo(xl-halfMidWidth*sin(angle), yl-halfMidWidth*cos(angle),
      mx1-halfLastWidth*sin(angle), my1-halfLastWidth*cos(angle))
    ctx.fill()

完全なデモ： http： //jsfiddle.net/PfzM2/2/（これははるかに大きなプロジェクトから抽出されているため、無関係なコードがたくさんあります）

Firefoxでは線が非常にスムーズにレンダリングされますが、Chromeの場所では「ギザギザ」に見えます。

ここに画像の説明を入力してください

ブラウザに発行された一連のコマンドと引数は同じでした。

ChromeにFirefoxのように線をレンダリングさせるにはどうすればよいですか？

4

1 に答える 1

0

フォントのレンダリングに関して、同様の質問があちこちで聞かれています。ほぼ確実に同じ根本的な問題である可能性があります: レンダリング エンジンに起因するアンチエイリアシングの違いです。ご存知のように、Chrome は Webkit を使用しています。FF、ゲッコー。Gecko は Webkit よりもアンチエイリアスを好むようです。

ブラウザの問題と考えてください (通常、IE の場合と同じだと思います)。

編集：逆も真であることが知られているようです。Nick Heer は彼のブログでこれについて議論しています。プラットフォームの問題である可能性があります。

于 2012-06-15T02:06:34.190 に答える