キャンバスは、（VIII）画像とアニメーションフレームを描画します

1.ドローの写真

）（ctx.drawImageの絵を描くために必要がある
画像オブジェクト：パラメータ
オプション、画像トリミングベーシスポイント（絵がトップ原点としての角を左）：2、3のパラメータを
4または5つのパラメータ：オプション、画像トリミング領域に（元の画像サイズに基づいて）サイズ
パラメーター6~7：キャンバス開始を描画する座標
オプション、表示された切出し画像のサイズ（ズーム）：パラメータ8〜9を

注：パラメーター2-5画像を切断するために使用される、任意です。次いで、全体像が表示され、通過しない
注パラメータ8-9表現は、トリミングされた画像サイズを表示された元のデフォルトサイズのスケーリングされたバージョンを使用している
パラメータの引数値及び2-5によって渡される場合、8-9：注意これは、省略することができない、またはエラーになります

注意：画像が非同期にロードされ、ロードされた図で実装の絵を描くための時間です

全体像を描きます

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    //创建图片对象
    var image = new Image()
    //将图片加载到内存中
    image.src = "xbx.jpeg"
    //监听图片加载是否完成
    image.onload = function(){
        //图片已完成加载
        ctx.drawImage(image,100,100)
    }
</script>

ズームオリジナル（ハーフサイズ）

ctx.drawImage(image,100,100,160,90)

写真をカット

//截去了左边的80px
ctx.drawImage(image,80,0,240,180,100,100,240,180)

2.ドローフレームアニメーション

ステップ：
ステップ：スプライトローディング
ステップ2を：作物は、元画像上に描画され、達成するために、異なる画像効果を表示することができる
ステップ3を：イベントは、キーストロークを監視し、切替ボタンに応じて額縁描か
ステップ4：画像間をフレームは、（古い絵をクリアするctx.clearRect（）を使用して、新しい絵を描きます）

いいえスプライトではなく、デモありません。

変更

変換方法は、（）/スケール（）/翻訳有する（回転）
それらは全体キャンバス要素になりコールは、座標システム、キャンバスの直線幅への変換、フォントサイズなどを含めて、影響を受けます

1.）（変換オフセット

翻訳使用した後に（）オフセット座標原点に従います

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    //原点偏移
    ctx.translate(50,50)
    ctx.font = "20px 微软雅黑";
    ctx.textBaseline = "top"
    ctx.fillText("本来我在左上角",0,0)
</script>

2.ズームスケール（）

スケール（）を使用した後、キャンバス全体をスケールアップしています

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    //原点偏移
    ctx.scale(0.5,0.5)
    ctx.font = "40px 微软雅黑";
    ctx.textBaseline = "top"
    ctx.fillText("本来我在100*100的位置",100,100)
</script>

前記回転が回転（）

ローテート（）：単位にMath.PI
例：キャンバスの45度時計回りに回転

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    //原点偏移
    ctx.rotate(Math.PI/4)
    ctx.font = "20px 微软雅黑";
    ctx.textBaseline = "top"
    ctx.fillText("本来我在100*100的位置",0,0)
</script>