How to Use the drawImage () method in HTML5CanvasAPI _ html5 tutorial tips-

Source: Internet
Author: User
This article describes how to use the drawImage () method in HTML5CanvasAPI. The drawImage () method is mainly used to scale or crop images. The coordinates and related parameter usage are given in this article, if you need it, you can refer to drawImage () as a key method. It can introduce images, canvases, and videos and scale or crop them.

There are three forms:

Syntax 1

Copy the content to the clipboard using JavaScript Code

  1. Context. drawImage (img, dx, dy );

Syntax 2

Copy the content to the clipboard using JavaScript Code

  1. Context. drawImage (img, dx, dy, dw, dw );

Syntax 3

Copy the content to the clipboard using JavaScript Code

  1. Context. drawImage (img, sx, sy, sw, sh, dx, dy, dw, dh );

Let's take a look at the coordinate sketch:

PS: do not define in style Otherwise, the image is automatically enlarged or reduced.
The three parameters are in the standard format and can be used to load images, canvases, or videos. In addition to the ability to load images, the five parameters can also be used to scale the images with a specified width or height. In addition to scaling, you can also Crop Data. The meanings of parameters are shown in the following table.

Parameters Description
Img
Sx Optional. The x coordinate position of the Start cut.
Sy Optional. Y coordinate position of the Start cut.
Swidth Optional. Width of the cut image.
Sheight Optional. The height of the cut image.
X Place the x coordinate position of the image on the canvas.
Y Place the y coordinate position of the image on the canvas.
Width Optional. The width of the image to be used. (Stretch or zoom out an image)
Height The height of the image to be used. (Stretch or zoom out an image)

Next, we will try to load an image.

Copy the content to the clipboard using JavaScript Code

  1. DrawImage ()
  2. Does your browser support Canvas ?! Just change one !!
  3. Script
  4. Window. onload = function (){
  5. Var canvas = document. getElementById ("canvas ");
  6. Canvas. width = 800;
  7. Canvas. height = 600;
  8. Var context = canvas. getContext ("2d ");
  9. Context. fillStyle = "# FFF ";
  10. Context. fillRect (0, 0, 800,600 );
  11. Var img = new Image ();
  12. Img. src = "./images/20-1.jpg ";
  13. Img. onload = function (){
  14. Context. drawImage (img, 200,50 );
  15. }
  16. };
  17. Script

Running result:

Create a photo frame:
Here, we use clip (), drawImage (), and the three-step bezierCurveTo curve () to add a heart-shaped photo frame to the above case ~

Copy the content to the clipboard using JavaScript Code

  1. Draw a heart-shaped Photo Frame
  2. Does your browser support Canvas ?! Just change one !!
  3. Script
  4. Window. onload = function (){
  5. Var canvas = document. getElementById ("canvas ");
  6. Canvas. width = 800;
  7. Canvas. height = 600;
  8. Var context = canvas. getContext ("2d ");
  9. Context. fillStyle = "# FFF ";
  10. Context. fillRect (0, 0, 800,600 );
  11. Context. beginPath ();
  12. Context. moveTo (400,260 );
  13. Context. bezierCurveTo (450,220,450,300,400,315 );
  14. Context. bezierCurveTo (350,300,350,220,400,260 );
  15. Context. clip ();
  16. Context. closePath ();
  17. Var img = new Image ();
  18. Img. src = "./images/20-1.jpg ";
  19. Img. onload = function (){
  20. Context. drawImage (img, 348,240,100,100 );
  21. }
  22. };
  23. Script

Running result:

Is it beautiful? Well, now the most important thing is mask and image cropping. in java. awt, drawImage () is also a crucial method. Some people say that to create a Java game interface, you only need to use drawImage () to try it all over the world ~ The same is true in Canvas. The materials provided by the artist are basically images. In this case, drawImage () is very important for image processing. Even basic skills are the most important way to process images.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.