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>