Detailed explanation of the specific usage of

黄舟

Release： 2017-06-20 13:54:49

Original

1709 people have browsed it

The

Canvas is a newly defined tag in HTML5. As the name suggests, it is a canvas tag itself and has no behavior of its own. It is just a graphics container and a script must be used to draw graphics. The following is an example of its usage:

<canvas id="canvas" width="200" height="300">  
Your browser does not support HTML5 Canvas.  
</canvas>

Copy after login

As can be seen from the above code, the canvas tag has three attributes: id, width, height. Among them, the id value is defined to be referenced in JavaScript code. The canvas tag uses canvas as the interface to draw. width and height respectively define the width and height of the canvas. The default unit is pixels. The px unit cannot be added after the number.

The canvas tag is not supported by all browsers, so we need to place a piece of text between the start and end tags of the canvas. When the browser does not support the canvas tag, this text will be displayed in the canvas tag. is located to remind readers that the canvas tag does not work with this browser. In javascript, you must also determine whether the browser supports this tag:

var canvas=document.getElementById("canvas")  
if(!canvas.getContext)  
{  
alert("Your browser does not support HTML5 Canvas.")  
}  
else  
{  
//do something here  
}

Copy after login

You can use a canvas element to display a red rectangle:

<canvas id="Canvas"></canvas>  
<script type="text/Javascript">  
var canvas=document.getElementById(&#39;Canvas&#39;);  
var ctx=canvas.getContext(&#39;2d&#39;);  
ctx.fillStyle=&#39;#FF0000&#39;;  
ctx.fillRect(0,0,80,100);  
</script>

Copy after login

As in the above example, the drawing API is not defined in the canvas element itself, but defined on a drawing environment object obtained through the getContext() method of the canvas. The canvas API also uses path representation. However, a path is defined by a series of method calls, such as calls to the beginPath() and arc() methods, rather than being described as a

string of letters and numbers. Once the path is defined, other methods such as fill() operate on this path.

The above is the detailed content of Detailed explanation of the specific usage of