コメント：私は最近HTML5を学んでいます。これには非常に重要な要素のキャンバスカンバが含まれます。検索と調査の後、私はついにスーパーメアリーのシンプルなアニメーションを実現します。ここであなたと共有します。初心者に役立つことを願っています。
最近、私はHTML5を学んでいました。これには非常に重要な要素Canvas-Canvasが含まれています。オンラインでゲームソースコードをダウンロードしました。私はそれを理解することができますが、特定の関数を個別に抽出することはまだ困難です。そこで、私はオンラインでいくつかの例を検索し、スーパーメアリーのシンプルなアニメーションに気付きました。設計に関与する主なdrawimage（）関数
（1）drawimage（画像、x、y）この方法は、最も基本的な操作方法です。具体的には、指定された座標軸で動作する画像オブジェクト全体を描くことを指します。
（2）drawimage（画像、x、y、幅、高さ）この方法とは、操作する必要がある画像オブジェクトをスケーリングしてから、アートボードに描写することを指します。幅と高さは、画像を描画した後に描画したいサイズです。
（3）drawimage（image、sourcex、sourcey、sourcewidth、sourceheight、destx、desty、destwidth、destheight）これは最も複雑な方法ですが、非常に便利です。これは、操作する画像オブジェクトで、配置する左上隅の位置（SourceX、Sourcey）を選択し、必要な幅と高さ（SourceWidth、SourceHeight）を傍受し、対応する位置（Destx、Desty）および対応する範囲（DestWidth、Destheigh）内の傍受された画像を描写することを意味します。
1.最初に、私はオンラインでスーパーメアリーの連続歩行の動きの写真を検索しました（以下に示すように）
2。ここでマリオ.htmlという名前の新しいHTML5ファイルを作成し、キャンバス要素を定義し、アニメーションの開始ボタンを開始し、アニメーションの停止ボタンを一時停止します
3。関連JS関数