canvas (viii) draw pictures and animation frames

1. Draw Pictures

Need to draw pictures of ctx.drawImage ()
parameter a: the picture object
parameter two, three: Optional, picture cropping basis points (picture top left corner as the origin)
parameters four or five: Optional, image cropping area size (based on the original image size)
parameter six or seven: canvas to draw the starting coordinate
parameter eight or nine: optional, is displayed cropped image size (zoom)

Note: The parameters 2-5 are optional, used to cut the picture. Does not pass, then the whole picture is displayed
Note: Parameters 8-9 representation is displayed cropped image size, uses a scaled version of the default size for the original
Note: If the argument passed by value and 2-5, 8-9 on parameters It can not be omitted, or will be error

Note: The image is loaded asynchronously, it is time to draw a picture of the implementation in Figure loaded

Draw a complete picture

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

Zoom Original (half size)

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

Cut Pictures

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

2. Draw frame animation

Step:
Step a: loading a sprite
Step Two: crop is drawn on the original image, can display different image effects to achieve
Step Three: event monitors keystrokes, depending on the switching button drawn picture frame
Step Four: between images frame (use ctx.clearRect () to clear the old pictures, and then draw a new picture)

No sprite, not demonstration.

Change

Conversion method has translate () / scale () / rotate ()
calls they will result in the entire canvas element will be affected, including coordinate systems, conversion to the straight line width of the canvas, font size, etc.

1. Offset translate ()

After using translate () will follow the offset coordinate origin

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

After using the scale () are scaling up the entire canvas

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

Rotate (): Unit Math.PI
Example: 45 degrees clockwise rotation of the canvas

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