Canvasのレスポンシブ対応 - knowledge base
Canvasのレスポンシブ対応はなぜ難しいか Canvasは複雑なグラフィックの描画から、マルチデバイスに対応したアニメーションの実装、3Dの描画まで幅広く対応できる優れものです。 ところがレスポンシブ対応となると格段に難易度が上がります。 その理由について整理してみると、 属性値でサイズを指定するため、CSSでのサイズ指定ができない【こちらを参照】 画像描画の場合、素材となる画像から切り出すサイズ・開始座標を絶対値で指定してCanvasに描画するという考え方である【こちらを参照】 主にこの２点により、レスポンシブデザインやRetina対応ではセオリーとなっている「width:100%」などといった、親要素を基準としたサイズ指定ができないことが難易度を高くしているゆえんとなっています。 ただし、いくつかのテクニックやメソッドを組み合わせることでこれらに対応することが可能となります。 ちなみ
生 Canvas を触って分かったこと - Mobile Factory Tech Blog
こんにちは、モバイルファクトリー Advent Calendar 2019 17日目担当の yunagi_n です。 さて、2019年も暮れになった今、 PixiJS や Konva など、便利な Canvas フレームワークがありますが、 このたび初めて生の Canvas (Context2D) を触ることになりまして、 動作確認中などで気がついた点などがいくつかあったので紹介します。 基本的にはドキュメントをしっかり読めば良いのですが、普段は気がつかない部分もありましたので、記事にしました。 これから生の Canvas を触るぞ！という方の参考になれば嬉しいです。 requestAnimationFrame の実行頻度は端末依存 Canvas でアニメーションをさせたい場合、 Window.requestAnimationFrame を使ってループを実装します。 ここで指定するコールバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
