canvas(八)繪制圖片和幀動畫

1.繪制圖片

繪制圖片需要用的ctx.drawImage()
參數一：圖片對象
參數二，三：可選，圖片裁剪的基點（原圖左上角為原點）
參數四，五：可選，圖片裁剪區域的大小（基於原圖大小）
參數六，七：畫布的繪制起點坐標
參數八，九：可選，被裁剪圖片顯示出來的大小（縮放）

注意：參數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.繪制幀動畫

步驟：
步驟一：加載一張精靈圖
步驟二：繪制時對原圖進行裁剪，可達到顯示不同圖片的效果
步驟三：監聽鍵盤按鍵事件，根據不同的按鍵切換繪制的圖片幀
步驟四：切換圖片幀（利用ctx.clearRect()清除舊的圖片，再繪制新的圖片）

沒有精靈圖，無法演示。

轉換

轉換的方法有translate()/scale()/rotate()
調用他們來轉換畫布時會導致整個畫布內的元素都會受影響，包括坐標系，直線寬度，字體大小等等

1.偏移 translate()

使用translate()后坐標原點也會跟着偏移

<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.縮放 scale()

使用scale()后整個畫布都縮放了

<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>

3.旋轉 rotate()

rotate()：單位 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>