HTML5 Canvas Basic Drawing Graphic Combination

<canvas> </canvas> is just a container drawn graphic. In addition to ID, class, style and other attributes, there are Height and Width properties. There are three steps for drawing on the <canvas >> elements:

1. Get the DOM object corresponding to the <Canvas> element, which is a Canvas object;

2. Call the getContext () method of Canvas object to get a CanvasrenderingContext2D object;

3. Call the CanvasRenderingContext2D object for drawing.

Graphic combination:

• GlobalPha: Set or return the current alpha or transparent value of the drawing

This method is mainly to set the transparency of graphics, which is not described in detail here.

• GlobalCompositeoperation: Set or return the new image to how to draw it to the existing images. This method has the following attribute values:

The following is a small example. You can change the combination effect by clicking:

XML/HTML code Copy content to the clipboard