HTML5 Canvas: initial Canvas, html5 initial canvas

HTML5 Canvas: initial Canvas, html5 initial canvas

Canvas and HTML 5 can be used to do many things, such as drawing, animation, and game development.

 

Canvas Element

Canvas.

 

<Canvas id = "yourCanvasId" width = "300" height = "150"/>

In addition to common attributes, the Canvas Element has only two additional attributes: width and height. They all have no unit. In fact, the unit is px, but cannot be written. If these two attributes are not specified, the default value is width 300 and height 150.

As we all know, html element styles can be specified using css styles. Canvas is no exception.

The expected result is as follows:
 
 
The actual execution result is as follows:
 
The execution result shows that it is indeed a magnified hello. Why?
 
In fact, I think it can be understood in this way. It is a projection cloth, because the real drawing is not on it, but on a drawing board. After the drawing is completed, it is projected onto the projection cloth. This is similar to the slide projector we used in middle school. We write exercises on a glass board (drawing board) and project the slides to a canvas or a white wall ).
Therefore, when we think about it, we will understand that when the width and height attribute values in the css style are different from the width and height attribute values of the canvas element, the content on the drawing board is automatically scaled to the canvas.

Currently, the Canvas Element has three methods:
 
 
 
 
The CanvasRenderingContext2D object can be obtained through getContext ("2d"); then the context object can be used as a 2d graph.
With getContext ("3d"), you can perform 3d plotting. The bottom layer of 3d plotting is WebGL.
 
In the subsequent articles, you will learn the necessary knowledge of using Canvas to draw images.
CanvasRenderingContext2D API details:
Http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp
Https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D