Shulou(Shulou.com)06/01 Report--

Editor to share with you the example analysis of HTML5 Canvas slice Slicing, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The third and last variant of the drawImage method has eight new parameters that control the slice display.

DrawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

The first parameter is the same as the others, both a reference to an image or another canvas. The other eight parameters are best referred to the diagram on the right, the first four define the location and size of the slice of the image source, and the last four define the target display position and size of the slice.

Slicing is a powerful tool for image synthesis. Suppose you have an image that contains all the elements, then you can use this method to synthesize a complete image. For example, if you want to draw a chart and have a PNG file containing all the necessary text, you can easily change the final display of the chart according to the needs of the actual data. Another advantage of this approach is that you don't need to load each image separately.

Description

Code

Function draw () {

Var canvas = document.getElementById ('canvas')

Var ctx = canvas.getContext ('2d')

Var image = new Image ()

Image.onload = function () {

/ / the size of the image intercepted from 0Pie0 is displayed in the position of 100x50 in canvas, and the size is 200x100.

Ctx.drawImage (image,0,0,100,50,0,0200100)

}

Image.src ='.. / image/a.jpg'

}

Script >

Test image 3title >

Head >

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.