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

This article is to share with you about how HTML5 Canvas draws images. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Canvas can introduce images, it can be used for picture synthesis or making background and so on. As long as the images supported by Gecko (such as PNG,GIF,JPEG, etc.) can be introduced into canvas, and other canvas elements can also be used as the source of images.

The way to get an image

We can get the pictures in the page through the document.images collection, the document.getElementsByTagName (canvasName | | imageName) method, or the document.getElementById (canvasId | | imageId) method.

We can create a picture in the following simple ways:

Var img = new Image ()

Img.src = 'myImage.png'

We can also reference the image in the data: url way. Data urls allows you to define an image as a string of Base64-encoded strings. Its advantage is that the content of the picture is available immediately, so there is no need to take a trip to the server. (another advantage is that CSS,JavaScript,HTML and images can all be encapsulated together, making it easy to migrate. ) the disadvantage is that the image cannot be cached. If the image is large, the embedded url data will be quite long:

Var img_src =

_ 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='

Once we have the source image object, we can render it into canvas using the drawImage method. There are three forms of drawImage methods, and the following is the most basic one.

DrawImage (image, x, y)

Where image is the image or canvas object, and x and y are its initial coordinates in the target canvas.

When the script is executed, the picture begins to load. If the image is not finished loading when drawImage is called, the script will wait until it is loaded. If you don't want to, you can use the onload event:

Var img = new Image (); / / Create new Image object

Img.onload = function () {

/ / execute drawImage statements here

}

Img.src = 'myImage.png'; / / Set source path

If you only use one picture, that's enough. But once you need more than one image, you need more complex processing, but the image preloading strategy is beyond the scope of this tutorial, so you can refer to JavaScript Image Preloader if you are interested.

DrawImage example 1

Description

In the following example, I use an external image as the background of a linear graph. With the background map, we do not need to draw the responsible background, saving a lot of code. Only one image object is used here, so the drawing action is triggered in its onload event response function. The drawImage method places the background image at the upper-left corner of the canvas (0J0).

Code

Function draw () {

Var ctx = document.getElementById ('canvas'). GetContext (' 2d')

Var img = new Image ()

Img.onload = function () {

Ctx.drawImage (img,0,0)

Ctx.beginPath ()

Ctx.moveTo (30pr 96)

Ctx.lineTo (70pr 66)

Ctx.lineTo (103 .76)

Ctx.lineTo (170pl 15)

Ctx.stroke ()

}

Img.src ='.. / ren.gif'

}

Test Image 1

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.