

HTML5で画像を回転させて表示させると、斜めになった画像の縁の部分がギザギザになってしまいます。このジャギを回避する方法はないでしょうか？


CC BY-SA 3.0
2014-12-02T11:36:25.360
257
2020-01-22T19:51:26.640
2014-12-03T01:11:04.520
658
658
question
javascript css html5
HTML5で画像を回転させると縁にジャギが出てしまう


画像を上下左右1ピクセル大きくして、1ピクセル幅の透明の縁をつけると、回転してもジャギらなくなります。


CC BY-SA 3.0
2014-12-02T11:36:25.360
258
2014-12-02T11:36:25.360
658
257
answer


ジャギの出るのはどのブラウザでもでしょうか？  
Firefoxであれば下記が参考になるかと思います。

<https://stackoverflow.com/questions/9235342/3d-css-transform-jagged-edges-in-
firefox>

[code]

    body {
      -moz-perspective: 800px;
    }
    
    div {
      -moz-transform: rotateX(45deg);
      border: 1px solid white;
    }
[/code]

[code]

    <div style="display:inline-block; width:10em; height:10em; background:hotpink;margin-left:8em;"></div>
[/code]


CC BY-SA 4.0
2014-12-03T02:15:13.433
286
2019-12-13T13:45:40.200
2019-12-13T13:45:40.200
32986
621
257
answer


imgへの`transform:
rotate();`の適用でもcanvasでもそうなのですが、どちらもベクターではなくピクセル操作になるので、計算上端数が出るとジャギが見えると思いますし、ディスプレイのppiでも影響するので完全なコントロールは難しいかもしれませんね。  
前述の制約があるとして、その中で工夫するのであれば

  * borderを使ってnピクセルぶんの縁を作ってベクターラインで囲む
  * `box-shadow`を使ってドロップシャドウを生成してジャギが目立つ部分側に適用する
  * 表示するサイズの2倍のイメージを用意して、サイズ指定で50%表示で使うことでサンプリング数をあげる

あたりを組み合わせて試してみると良いと思います。


CC BY-SA 4.0
2014-12-03T02:48:14.647
292
2020-01-22T19:51:26.640
2020-01-22T19:51:26.640
32986
248
257
answer