Canvas Study Notes 1: basic understanding, canvas Study Notes

Canvas Study Notes 1: basic understanding, canvas Study Notes

<Canvas> A label defines a canvas that allows you to draw 2D and 3D images on a webpage. Now you need to learn how to draw 2D images first, drawing 3D images is the content of WebGL (that is, OpenGL for web pages and 3D graphic interfaces ).

Attribute

<Canvas> only the width and height attributes are available. If the width and height attributes are not set, the default initial size of the canvas is Px in width and PX in height. If you use CSS to set the width and height of the canvas, and the configured width and height are not the default size ratio, the image displayed on the canvas will be distorted and deformed. Therefore, we recommend that you use JavaScript to set the width and height of the canvas.
If you do not set a style for the canvas, the canvas will be a transparent rectangle, unless the image is drawn above.

Feedback

<Canvas> labels can easily define feedback information. If the browser does not support the <canvas> label, the canvas will not appear, but the content included between the <canvas> </canvas> labels will appear. For example:

<canvas>  Your browser doesn't support!</canvas>

If the browser does not support the <canvas> label, "Your browser doesn't support!" is displayed !" This information. If the browser supports the <canvas> label, the content is not displayed.

Drawing Context

To draw a drawing on a canvas, you must obtain the drawing context of the canvas and draw a drawing and image on the canvas through the drawing context. To draw a 2D drawing, you must obtain the 2D drawing context. To draw a 3D drawing, you must obtain the 3D drawing context. This is the content of WebGL.

<Canvas id = "canvas"> Your browser doesn't support! </Canvas> the complete code is omitted. The following is the JavaScript part var canvas = document. getElementById ('canvas '); var ctx = canvas. getContext ('2d ');

You can use the. getContext method to obtain the 2D drawing context. How to Use ctx to draw a graph next article.

Compatibility Detection

Previously, I talked about the feedback contained in the <canvas> label. Now I want to use JavaScript to check canvas compatibility. Check whether the. getContext method exists. The Code is as follows:

var canvas = document.getElementById('canvas');if (canvas.getContext) {  var ctx = canvas.getContext('2d');  // drawing code here} else {  // canvas-unsupported code here}

 

This is the basic understanding of canvas.