Comment: What is Canvas<canvas> is a new HTML element that is defined in HTML5. This element can usually be used to draw graphics, synthesize images, etc. in HTML pages through JavaScript, and can also be used to make some animations. Of course, currently HTML5
What is Canvas
<canvas> is a new HTML element that is defined in HTML5. This element can usually be used to draw graphics, synthesize images, etc. in HTML pages through JavaScript, and can also be used to make some animations. Of course, the HTML5 specification is still in the draft stage, and it may take until 2010 to be officially released, but now many browsers have already supported some HTML5 specifications. Currently, browsers that support canvas elements include Firefox3+, Safari4, Chrome 2.0+, etc., so when running the examples on this page, please make sure you are using one of the above browsers.
Although I have had a lot of tutorials on Canvas in Mozilla, I decided to record my learning process. If you think I don't understand enough, you can find a link to the Canvas tutorial on the Mozilla website in the reference materials.
Also, some interesting Canvas examples can be found here.
Get started with Canvas
Using Canvas is simple. Just like using other HTML elements, you just need to add a <canvas> tag to the page:
<canvas></canvas>
Of course, this is just a simple creation of a Canvas object and does not perform any operation on it. At this time, the canvas element looks no different from the div element, and nothing can be seen on the page :)
In addition, the size of the canvas element can be specified by the width and height attributes, which is somewhat similar to the img element.
Canvas' core: Context
As mentioned earlier, you can operate Canvas objects through JavaScript to draw graphics, synthesis images, etc. These operations are not performed through the Canvas object itself, but are performed through a method of the Canvas object to getContext to obtain the Canvas operation context. In other words, in the process of using the Canvas object, we deal with the Context of the Canvas object, and the Canvas object itself can be used to obtain information such as the size of the Canvas object.
It is very simple to get the Context of the Canvas object. Just call the getContext method of the canvas element. When calling, you need to pass a Context type parameter. The only type value that can be used and can be used is 2d:
Firefox3.0.x's embarrassment
Although Firefox3.0.x supports canvas elements, it is not fully implemented according to the specification. The fillText and measureText methods in the specification are replaced by several Firefox-specific methods in Firefox3.0.x. Therefore, when using Canvas in Firefox3.0.x, you need to first fix the differences between these methods in different browsers.
The following code is taken from the MozillaBespin project, which corrects the inconsistency between the Context object of Canvas in Firefox3.0.x and the HTML5 specification:
Note: Until Opera 9.5, Opera does not support the fillText of the Canvas object and its related methods and properties in the HTML5 specification.
Hello, Canvas!
After some preliminary understanding of Canvas, we started writing our first Canvas program, another branch of the famous HelloWorld Hello, Canvas:
Run the example, the area where the Canvas object is located shows Hello,World!, which is exactly the function of ctx.fillText(Hello,World!,20,20); in the code.
fillText and related properties
The fillText method is used to display text in Canvas. It can accept four parameters, the last one is optional:
voidfillText(inDOMStringtext,infloatx,infloaty,[Optional]infloatmaxWidth);
Where maxWidth represents the maximum width when displaying text, which can prevent text from overflowing. However, in my tests, I found that maxWidth is not effective when specifying maxWidth in Firefox and Chomre.
Before using the fillText method, you can adjust the font of the text by setting the font property of the Context. In the above example, I used 20ptArial as the font of the text. You can set different values yourself to see the specific effect.
Finish
That's all for now. I will write this series while reading the specifications:)
References
1. HTML5 Canvas, a new stage for scripting language, hred
2.
3. CanvasTutorial Chinese, Mozilla
4.CanvasTutorial English, Mozilla
5.canvassupportinOpera,Opera