Home > Tutorials > Html Tutorials

Example of using the drawImage () method in the HTML5 Canvas API, html5drawimage

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Example of using the drawImage () method in the HTML5 Canvas API, html5drawimage

DrawImage () is 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 the width and height of <canvas> in the 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. <! DOCTYPE html>
  2. <Html lang = "zh">
  3. <Head>
  4. <Meta charset = "UTF-8">
  5. <Title> drawImage () </title>
  6. <Style>
  7. Body {background: url ("./images/bg3.jpg") repeat ;}
  8. # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
  9. </Style>
  10. </Head>
  11. <Body>
  12. <Div id = "canvas-warp">
  13. <Canvas id = "canvas">
  14. Does your browser support Canvas ?! Just change one !!
  15. </Canvas>
  16. </Div>
  18. <Script>
  19. Window. onload = function (){
  20. Var canvas = document. getElementById ("canvas ");
  21. Canvas. width = 800;
  22. Canvas. height = 600;
  23. Var context = canvas. getContext ("2d ");
  24. Context. fillStyle = "# FFF ";
  25. Context. fillRect (0, 0, 800,600 );
  27. Var img = new Image ();
  28. Img. src = "./images/20-1.jpg ";
  29. Img. onload = function (){
  30. Context. drawImage (img, 200,50 );
  31. }
  32. };
  33. </Script>
  34. </Body>
  35. </Html>

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. <! DOCTYPE html>
  2. <Html lang = "zh">
  3. <Head>
  4. <Meta charset = "UTF-8">
  5. <Title> draw a heart-shaped Photo Frame </title>
  6. <Style>
  7. Body {background: url ("./images/bg3.jpg") repeat ;}
  8. # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
  9. </Style>
  10. </Head>
  11. <Body>
  12. <Div id = "canvas-warp">
  13. <Canvas id = "canvas">
  14. Does your browser support Canvas ?! Just change one !!
  15. </Canvas>
  16. </Div>
  18. <Script>
  19. Window. onload = function (){
  20. Var canvas = document. getElementById ("canvas ");
  21. Canvas. width = 800;
  22. Canvas. height = 600;
  23. Var context = canvas. getContext ("2d ");
  24. Context. fillStyle = "# FFF ";
  25. Context. fillRect (0, 0, 800,600 );
  27. Context. beginPath ();
  28. Context. moveTo (400,260 );
  29. Context. bezierCurveTo (450,220,450,300,400,315 );
  30. Context. bezierCurveTo (350,300,350,220,400,260 );
  31. Context. clip ();
  32. Context. closePath ();
  34. Var img = new Image ();
  35. Img. src = "./images/20-1.jpg ";
  36. Img. onload = function (){
  37. Context. drawImage (img, 348,240,100,100 );
  38. }
  39. };
  40. </Script>
  41. </Body>
  42. </Html>

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.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wordpress the field html5 canvas map example animation in html5 canvas examples example of rest api in php html5 canvas clock use of static method in java with example html5 canvas examples
Related Article
What is the META tag in HTML? Introduction to META Tag proper...
An article that allows you to read basic HTML rules and Web p...
How does HTML set the background color? HTML background color...
HTML5 new label--nav label Introduction
What are the canvases and SVG in HTML5? What is the differenc...
How do I use the HTML5 feature of the Rel property in the?

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More