Canvas 1. canvas

Canvas 1. canvas

This is also the first blog. Canvas is just getting started with learning. What's wrong? I hope my friends in this blog will correct me.

1. canvas history

First, it is a tag of HTML5.

It is designed for vector graphics on the client side. It does not have its own behavior. It presents a drawing API to Javascript so that the script can draw everything you want to draw on a canvas.

Secondly, it is referenced in Apple's Safari 1.3 browser. Later, Firefox 1.5 and Opera 9 also support the <canvas> label. Later, IE can also use the <canvas> label, but use open source Javascript code to build a compatible canvas Based on the VML support of IE. See http://excanvas.sourceforge.net /.

Finally, driven by informal associations of browser manufacturers, the <canvas> label becomes a formal label in the HTML5 draft.

2. canvas Element

2.1 methods and attributes of the canvas Element

Canvas attributes

Attribute	Description	Type	Value Range	Default Value
Width	The width of the canvas Element Drawing surface. By default, the browser sets the size of the canvas element to be the same as that of the drawing surface. However, if CSS overwrites the element size, the browser scales the drawing surface to fit the element size.	Non-negative integer	Any non-negative integer in the valid range. You can add "+" or spaces at the beginning of a value, but according to the rules, you cannot add a px suffix to the value.	300
Height	The height of the canvas Element Drawing surface. For details, refer to the description of the width attribute.	Non-negative integer	Any non-negative integer in the valid range. You can add "+" or spaces at the beginning of a value, but according to the rules, you cannot add a px suffix to the value.	300

Canvas Method

Attribute	Description
GetContext ()	Returns the drawing environment related to the canvas element.
ToDataURL (type, quality)	Return a data address. You can set it to the src attribute value of the img element. The first parameter specifies the image type, such as image/jpeg or image/png. The first parameter defaults to image/png. The second parameter must be 0 ~ Double value between 1.0, which indicates the quality of JPEG image display.
ToBlob (callback, type, args ...)	Create a Blob for this canvas Element Image File. The first parameter is a callback function. The browser calls the callback function with a reference to blob as the parameter. The second parameter specifies the image type in the form of "image/png. The last parameter ranges from 0 ~ A value between 1.0 indicates the quality of the JPEG image. In the future, some other parameters will be added for precise control of image attributes.

Discussion: the size of the canvas element and the size of the drawing surface

A simple example shows the effects of canvas.

Var canvas = document. getElementById ("canvas"); context = canvas. getContext ("2d"); context. font = "38pt Arial"; context. fillStyle = "cornflowerblue"; context. strokeStyle = "blue"; context. fillText ("Hello Canvas", canvas. width/2-150, canvas. height/2 + 15); context. strokeText ("Hello Canvas", canvas. width/2-150, canvas. height/2 + 15 );Example1-1

 

<! DOCTYPE html> The following code uses CSS to set the canvas size.

 

<! DOCTYPE html> We can see that the element size has changed significantly.

Canvas actually has two sets of sizes: one is the size of the element itself, and the other is the size of the element drawing surface.

When setting the width and height attributes of an element, the size of the element and the size of the drawing surface are also modified.

When the element size is set through CSS, only the size of the element is changed, without affecting the drawing surface.

By default, the canvas Element and Its drawing surface are X Px in size. When CSS is used, the element size increases to 600px * 300px. The drawing surface size is still 300px * 300px. In this case, the browser scales the image to conform to the element size. Of course there is a situation shown in the second figure above.