HTML キャンバス内をスクロールする方法
「HTML」としてよく知られているハイパーテキスト マークアップ言語のバージョン 5 には、「キャンバス」と呼ばれる新しい要素のサポートが含まれています。 HTML5 キャンバス要素は、アニメーション、グラフィック、またはカスタム JavaScript コードのコンテナーとして機能します。 Web ページのキャンバス内でスクロールを有効にしたい場合は、キャンバス要素全体を div 要素でラップし、overflow 属性を使用して必要なスクロール バーを追加できます。
ステップ 1
canvas 要素を含む HTML ドキュメントを Web 編集アプリケーションまたはワード プロセッサで開きます。
ステップ 2
HTML コードの「
ステップ 3
HTML コードに次のように入力してください:
オーバーフロー属性は、コンテナー内のスクロール バーを有効にします。
ステップ 4
width 属性と height 属性を、div コンテナーのサイズの定義に使用するピクセル量に置き換えます。選択した幅と高さの値が、キャンバス要素全体のサイズに十分収まるようにしてください。
ステップ 5
"" タグの後にテキスト カーソルを置きます。
ステップ 6
「
」と入力 " を HTML コードに挿入して、div コンテナーを閉じます。
ステップ 7
HTML ドキュメントを保存して Web サーバーにアップロードし、canvas 要素をスクロールして表示します。