17

これが.png画像（右側）と、画像を描いたキャンバス要素（左側）です。品質の違いに気づきましたか？Canvasは、画像の品質を著しく低下させてレンダリングします。私たちは何ができる？

ChromeとIE9でこの結果を観察しました。他の人もおそらく同じことをするでしょう。画像をレンダリングする方法はごく普通です。スクリプトでは、新しいImage()オブジェクトを作成し、ロードした後、次のように呼び出します。
context.drawImage(myimage, x, y);

右：欲しいもの、左：得たもの

編集：

これは私がキャンバスで観察した最初の画像です：
詳細：私が最初に得たもの

そして、これが私が書いた後にキャンバスがレンダリングするものです：
context.drawImage(myimage,parseInt(x),parseInt(y));
詳細：丸みを帯びた座標で得られるもの

私は何を言うことができますか、素晴らしい答えの人。最高の状態での鋭い射撃。帽子はあなたにオフです。

EDIT2：

私が試しcontext.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);た結果は次のとおりです。

詳細：最悪の場合

最初のものより悪いと思います。私はこれをクロームで観察しましたが、IE9ではそれは悪いことと同じです。

4

3 に答える 3

11

両方の画像のオーバーレイを作成して、互いに中和するようにしました。それはうまくいきませんでした、私はエッジに問題がありました。

オーバーレイ画像

x, y座標が整数かどうかを確認してください。ここで浮動小数点数を使用すると、一部の実装では「ピクセル間」で画像をレンダリングしようとするため、画像がぼやける可能性があります。 

context.drawImage(myimage, parseInt(x), parseInt(y));

これも機能しない場合は、整数値+0.5
を使用してみてください。OpenGLの実装では、ピクセルの中心に到達するために0.5の座標を使用する必要があることを知っています。

context.drawImage(myimage, parseInt(x)+0.5, parseInt(y)+0.5);

編集：

Html5Rocksでこのページをチェックしてください！

于 2012-10-18T05:42:22.443 に答える
7

私はこれがすでに答えられていることを知っていますが、ここで何が起こっているのか、そして何ができるのかについて話すためにもっと情報を提供したいと思います。

これは、画像のスムージングが原因です。これは、デフォルトでキャンバス上のバイリニア/トリリアナー/バイキュービックなどのスムージングアルゴリズムにデフォルト設定されていますが、必要なものは最近傍として知られています。

この仕様では、最近、と呼ばれるプロパティが追加されました。このプロパティはimageSmoothingEnabled、デフォルトでtrue、非整数座標で描画された画像または縮尺で描画された画像がよりスムーズなアルゴリズムを使用するかどうかを決定します。に設定されている場合false、最近傍が使用され、滑らかでない画像が生成され、代わりに見た目の大きいピクセルが生成されます。

画像のスムージングは​​最近キャンバス仕様に追加されたばかりで、すべてのブラウザでサポートされているわけではありませんが、一部のブラウザでは、このプロパティのベンダープレフィックスバージョンが実装されています。mozImageSmoothingEnabledコンテキストでは、Firefox 、Chrome、Safariに存在しwebkitImageSmoothingEnabled、これらをfalseに設定すると、アンチエイリアシングの発生が停止します。残念ながら、執筆時点では、IE9とOperaは、ベンダープレフィックスなどを使用して、このプロパティを実装していません。

一般に、次の2つのルールに従う必要があります。

  1. キャンバスを拡大縮小する場合は、画像のスムージングを無効にするか、最近隣内挿法を使用して拡大縮小する必要があります。現在、これを手動で行うためのアルゴリズムがいくつかあり、これが上記のオプションが行っていることです。
  2. 整数座標で描画していない場合は、同じ問題が発生し、同じ解決策があります。上記のオプションがブラウザに存在しない場合は、整数座標に戻す必要があります(x | 0, y | 0)

ただし、x | 0フロアxが2,147,483,647より大きい数値では機能しない場合：最大の32ビット符号付き整数。

うまくいけば、あなたの座標はそれより大きくないでしょう！

于 2012-10-18T18:57:46.730 に答える
-1

このリンクは完全に役立つと思います。同じことをしましたが、私の場合、javascriptを使用してキャンバスの重みと高さを動的に指定します。次に、宣言するときにキャンバスに高さと幅を指定しました。それで問題は解決します。

于 2014-10-14T10:50:53.220 に答える