Canvas labels (3)-use images

An interesting feature of canvas is the ability to introduce images, which can be used for image synthesis or background creation. Currently, only text can be added to the image (the standard description does not include the function of drawing text ). Any images supported by gecko (such as PNG, GIF, and JPEG) can be introduced into the canvas, and other Canvas elements can also be used as the source of the image. (Text/ghost warriors)

Introduce Images

To import an image, you only need to take the following two steps:
The first is the source image. It is not a simple URL path, but it can be a reference of a javascript image object or other Canvas elements.
Then, use the drawimage method to insert the image into the canvas. Let's take a look at the first step. There are basically four options:

Reference images on the page
You can use the document. Images set, document. getelementsbytagname method, or document. getelementbyid method to obtain the image on the page (if the ID of the image element is known.

Use other canvas elements
Similar to referencing images on a page, you can use document. getelementsbytagname or document. getelementbyid to obtain other Canvas elements. But you should introduce the canvas that you have prepared.

A common application is to create thumbnails for another large canvas.

Create an image from scratch
In addition, we can use a script to create a new image object, but the main drawback of this method is that if you do not want the script to pause because of waiting for the image device, you have to break through the pre-load.
We can use the following simple method to create an image:

1. Var img = new Image (); // Create new Image object
2. Img. src = 'myImage.png '; // Set source path

Copy code

After the script is executed, the image is loaded. If drawimage is called, the script waits until the image is loaded. If you do not want this, you can use the onload event:

1. Var img = new Image (); // Create new Image object
2. Img. onload = function (){
3. // Execute drawimage statements here
4. }
5. IMG. src = 'myimage.png '; // Set Source Path

Copy code

If you only use one image, this is enough. However, if you need more than one image, you need more complicated processing methods. However, the image pre-loading policy is beyond the scope of this tutorial. If you are interested, refer to JavaScript image preloader.

Embedding images using data: URL
We can also reference images using the data: url method. Data urls allows you to define an image using a Base64 encoded string. The advantage is that the image content is instantly available without having to go around the server. (Another advantage is that CSS, JavaScript, HTML, and images can all be encapsulated together for convenient migration .) The disadvantage is that the image cannot be cached. If the image is large, the embedded url data will be quite long:

1. VaR img_src = 'data: image/GIF; base64, r0lgodlhcwalaiaaaaaaaa3pn/zih5baeaaaealaaaaaasaaaiuha + hkcuo4lmnvindo7qyrixigbyaow = ';

Copy code

Drawimage

Once the source image object is obtained, we can use the drawImage method to render it into the canvas. The drawImage method has three forms: The following is the most basic one.

1. Drawimage (image, x, y)

Copy code

Here, image is an image or canvas object, and x and y are the starting coordinates of x and y in the target canvas.

Drawimage Example 1
In the following example, I use an external image as the background of a first-line image. With background images, we do not need to draw a responsible background, saving a lot of code. Only one image object is used here, so the painting action is triggered in its onload event response function. The drawImage method places the background image in the upper left corner (0, 0) of the canvas.
View examples
Attachment: Canvas_backdrop.png

1. Function draw (){
2. VaR CTX = Document. getelementbyid ('canvas '). getcontext ('2d ');
3. VaR IMG = new image ();
4. IMG. onload = function (){
5. CTX. drawimage (IMG, 0, 0 );
6. CTX. beginpath ();
7. Ctx. moveTo (30,96 );
8. Ctx. lineTo (70, 66 );
9. Ctx. lineTo (103,76 );
10. Ctx. lineTo (170,15 );
11. Ctx. stroke ();
12. }
13. Img. src = 'images/backdrop.png ';
14. }