Skip to main content
本文に 4 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

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

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

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

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

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

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

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

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

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

ソース リンク
mutuki
  • 343
  • 1
  • 4
  • 7

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

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

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