HTML5 uses Canvas to draw graphics, html5canvas
I. Canvas labels:
1. HTML5 <canvas> elements are used to draw images, which are completed by scripts (usually javascript.
2. <canvas> labels are only graphical containers and must be drawn using scripts.
3. You can use Canvas to draw paths, boxes, circles, characters, and add images.
Ii. Drawing a Canvas image 1. Drawing a rectangle 2. Draw a circle 3. moveTo and lineTo 4. Use bezierCurveTo to draw the besell Curve5. Draw a linear gradient
6. Draw a radial gradient 7. Draw a deformed Image 8. Drawing a graphic to synthesize the gloablCompositeOperation attribute
Use different globalCompositeOperation values to draw a rectangle. The orange rectangle is the target image. The pink rectangle is the source image.
Define and use the globalCompositeOperation attribute to set or return how to draw a source (new) image to an existing image. Source image = the drawing you plan to place on the canvas. Target Image = the drawing you have placed on the canvas. Property value:| Value | Attribute |
| Source-atop | The image that is drawn after it is displayed on the top of the previously drawn image. The image that is drawn later is invisible outside the first drawn image. |
| Source-in | Only the intersection part is drawn, and it is filled and overwritten by the rear drawing. The rest part is transparent. |
| Source-out | Only the non-Intersecting parts of the drawing after the painting are covered by the filling of the drawing after the painting, and the remaining parts are transparent. |
| Source-over | The image to be drawn. The intersection is filled by the image drawn after the cover (color, gradient, texture) |
| Destination-atop | The first drawing is displayed on the top of the drawing. The part of the target image outside the source image is not displayed. |
| Destination-in | The first drawing is displayed in the drawing that is drawn later. Draw only the intersection part, which is covered by the filling of the first drawing, and the rest is transparent. |
| Destination-out | Only the part of the target image outside the drawn image is displayed, and the source image is transparent. |
| Destination-over | The intersection part is overwritten by the filling (color, gradient, texture) of the first drawn image. |
| Lighter | The intersection part is filled with the specified image to increase the brightness. |
| Copy | The image drawn after the display. Only draw the image. |
| Xor | Transparent Intersection |
The above code is as follows:
1 <!DOCTYPE html> 2 Image merging 9. Draw a shadow for the imageThe Code is as follows:
1 <! DOCTYPE html> 2 5-star shadow 10. canvas ImagesSyntax: ctx. drawImage (imgobj, left, top, width, height)
1 <! DOCTYPE html> 2 Use Images
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
