2023/1/23リリースのiOS16.3にて、以下のノイズは発生しなくなったようです。
変なノイズの問い合わせがあった場合は、「OSを最新に」と言い張りましょう。
ベジェ曲線で画像をマスクしつつ、曲線をふわふわさせてオサレな雰囲気をだしたいときってありますよね。
私はありました
先日、このオサレな実装がiOS16では台無しになることに気づきました。
例：↓こんな感じでノイズ(謎の線)が描画されることがあります。
実際に動く(オサレではない)サンプルを用意しました。
bezierCurveToの曲線でclipした画像を描画する、ググると良く出てくる実装方法です。
下のcodepenをiOS16(iOS16.3以下)で実行するとノイズがチラチラと表示されると思います。
See the Pen Noise appears on Canvas iOS16 by 393 (@393) on CodePen.
ノイズ発生の条件はざっと調べた範囲では以下のとおりです。
- clipしてdrawImageしたときに発生
- clipしてグラデーションでfillしたときにも発生
- 単色でfillのときには発生しない
- 2次ベジェ(quadraticCurveTo)、3次ベジェ(bezierCurveto)どちらの実装でも発生
- bezierのコントロールポイントが任意の座標のときに発生
- 上のサンプルはアニメーションさせているので、ノイズがチラチラしていますが、任意の座標で止めるとノイズは表示されたままになります
- ノイズでる座標の法則性はよくわからず
解決方法です。
上のcodepenにも実装してありますが、[toggle]ボタンを押すとiOS16でも、ノイズは発生しなくなります。
実装の違いはcodepenでjsを見てもらえばわかると思いますが、要はclipはしないで、patternで描画する、というのがポイントのようです。
この問題についてざっとググってみても、話題にしてる人も解決策も見当たらなかったので、ここに一つの解決策としてメモを残しておきます。
まだ見ぬ誰かのお役に立てれば幸いです。