What does canvas mean?

What does canvas mean?

Canvas in English means "canvas", but the Canvas mentioned here is a new element in HTML5, on which developers can draw a series of graphics. The writing method of Canvas in HTML files is very simple:

<canvas id="canvas" width="宽度" height="高度"></canvas>

The id attribute can be used by all HTML elements. The only attributes that come with Canvas are the last two (controlling width and height respectively), and there are no others. . As for compatibility, CanIUse states that the basic functions are currently supported by 90% of the browsers used by users, so in most cases it can be used with confidence.

Note that you must use the width and height properties that come with Canvas, and do not use CSS to control it, because CSS control will cause the Canvas to deform. You can try to compare it with PhptpShop. The latter changes the "image size", while the former is the correct way to change the "canvas size". For example, the picture below is a horizontal splicing of three pictures: the black box on the far left is the original picture with a size of 50px * 50px; the middle is the effect of changing the image size to 100px * 100px. The image becomes blurry, but for the image itself It is said that the coordinate range has not become larger; the rightmost one is the correct 100px * 100px Canvas.

Canvas Most of the drawing methods have nothing to do with the tag and require JavaScript to operate on them. This is the so-called Canvas API.

We first get this element:

var canvas = document.getElementById('canvas');

Then use a method to get the entrance that can call all Canvas APIs:

var ctx = canvas.getContext('2d');

Are you excited to think about 2d when you see it? Is there 3D? There is no 3D writing method, but if you want to open the door to the 3D world, you can write canvas.getContext('webgl'). However, WebGL is a set of standards based on OpenGL ES 2.0, which is completely different from this article, so it will not be discussed here.

The above is the detailed content of What does canvas mean?. For more information, please follow other related articles on the PHP Chinese website!