HTML5:HTML5 Canvas

YLBTECH-HTML5:HTML5 Canvas

1. back to top

1, HTML5Canvas

<canvas> tags define graphs , tables and other images, and you must use scripts to draw graphics .

Draw a red rectangle on the canvas (canvas), a gradient rectangle, a colored rectangle, and some colored text.

What is canvas?

HTML5 <canvas> elements are used for drawing drawings, which are done through scripts (usually JavaScript) .

<canvas> tags are just graphics containers, and you must use scripts to draw graphics .

There are several ways you can use canvas to draw paths, boxes, circles, characters, and add images.

Browser support

The number in the table represents the first browser version number that supports the <canvas> element.

Elements
<canvas>	4.0	9.0	2.0	3.1	9.0

Create a canvas (canvases)

A canvas is a rectangular box in a Web page that is drawn by the <canvas> element.

Note: The <canvas> element does not have a border and content by default.

<canvas> simple examples are as follows:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: labels typically need to specify an id attribute (often referenced in the script), and the width and Height properties define the size of the canvas.

tip: You can use multiple <canvas> elements in an HTML page.

Use the Style property to add a border:

Instance

 
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Try it?
Use JavaScript to draw images

The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:

Instance

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Try it?

Instance parsing:

First, find the <canvas> element:

var C=document.getelementbyid ("MyCanvas");

Then, create the context object:

var Ctx=c.getcontext ("2d");

GetContext ("2d") objects are built-in HTML5 objects that have a variety of drawing paths, rectangles, circles, characters, and methods for adding images.

The following two lines of code draw a red rectangle:

Ctx.fillstyle= "#FF0000";
Ctx.fillrect (0,0,150,75);

Setting the FillStyle property can be a CSS color, gradient, or pattern. FillStyle default setting is #000000 (black).

The fillRect (x,y,width,height) method defines how the rectangle is currently filled.

Canvas coordinates

A canvas is a two-dimensional grid .

The upper-left corner coordinates of the canvas are (0,0)

The FillRect method above has parameters (0,0,150,75).

This means: Draw the 150x75 rectangle on the canvas, starting at the top left corner (0,0).

Coordinate instances

As shown, the X and Y coordinates of the canvas are used to position the drawing on the canvas. The mouse moves the rectangle box, showing the positioning coordinates.

Xycanvas-Path

To draw a line on the canvas, we will use the following two methods:

• MoveTo (x, y) defines line start coordinates
• LineTo (x, y) defines line end coordinates

To draw a line we must use the "ink" method, just like a stroke ().

Instance

Defines the start coordinate (0,0), and the end coordinate (200,100). Then use the stroke () method to draw the line:

Javascript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Try it?

To draw a circle in the canvas, we will use the following methods:

Arc(x,y,R,start,stop)        

In fact, we used the "ink" method when drawing a circle, such as a stroke () or fill ().

Instance

Use the Arc () method to draw a circle:

Javascript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Try it?
Canvas-Text

Using canvas to draw text, important properties and methods are as follows:

• font-Define Fonts
• Filltext (text,x,y)-Draws solid text on canvas
• Stroketext (text,x,y)-Draw hollow text on canvas

Using Filltext ():

Instance

Use the "Arial" font to draw a high 30px of text (solid) on the canvas:

Javascript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Try it?

Using Stroketext ():

Instance

Use the "Arial" font to draw a high 30px text (hollow) on the canvas:

Javascript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Try it?
Canvas-Gradient

Gradients can be filled in rectangles, circles, lines, text, and so on, and various shapes can define different colors themselves.

There are two different ways to set up the canvas gradient:

• Createlineargradient (x,y,x1,y1)-Create a line gradient
• Createradialgradient (x,y,r,x1,y1,r1)-Create a radial/circle gradient

When we use a Gradient object, you must use two or more stop colors.

The Addcolorstop () method specifies that the color stops, and the parameters are described using coordinates, which can be between 0 and 1.

Using a gradient, set the value of FillStyle or Strokestyle to a gradient, and then draw a shape, such as a rectangle, text, or a line.

Using Createlineargradient ():

Instance

Creates a linear gradient. Fill the rectangle with a gradient:

Javascript:

Var c=document.getElementById("myCanvas");
Var ctx=c.getContext("2d");
 
// Create a gradient
Var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// fill the gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Try it?

Using Createradialgradient ():

Instance

Creates a radial/circular gradient. Fill the rectangle with a gradient:

Javascript:

Var c=document.getElementById("myCanvas");
Var ctx=c.getContext("2d");
 
// Create a gradient
Var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// fill the gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Try it?
Canvas-Images

To place an image on the canvas, use the following methods:

• DrawImage (image,x,y)

Using images:

Instance

Place an image on the canvas:

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Try it?
HTML Canvas Reference Manual

The full properties of the tag can be referenced in the canvas reference manual.

HTML <canvas> Tags

Tag	Description
<canvas>	The HTML5 canvas element uses JavaScript to draw an image on a Web page.

2.

2. back to top

3. back to top

4. back to top

5. back to top

1, HTTP://WWW.RUNOOB.COM/HTML/HTML5-CANVAS.HTML2,

6. back to top

Ylbtech Source: http://ylbtech.cnblogs.com/ This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

HTML5:HTML5 Canvas