HTML5 Canvas

;

Note: Tags usually need to specify an id attribute (often referenced in scripts), the size of the canvas defined by the width and height attributes.

Tip: You can use multiple elements in an HTML page.

Use thestyle attribute to add borders:

     
   您的浏览器不支持 HTML5 canvas 标签。   

Run the program and try it

Use JavaScript to draw images

The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript:

Example

     
   您的浏览器不支持 HTML5 canvas 标签。    

Program running result:

Example analysis:

First, find the element:

##var c=document.getElementById ("myCanvas");

var ctx=c.getContext(" 2d");

The following two lines of code draw a red rectangle:

ctx.fillStyle="#FF0000";

ctx.fillRect(0, 0,150,75);

Set the fillStyle property to a CSS color, gradient, or pattern. The default setting for fillStyle is #000000 (black).

fillRect(x,y,width,height) method defines the current filling method of the rectangle.

Canvas coordinatescanvas is a two-dimensional grid.

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

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

Means: Draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).

Coordinate example

As shown in the figure below, the X and Y coordinates of the canvas are used to position the painting on the canvas. The positioning coordinates are displayed on the rectangular frame where the mouse moves.

Canvas - Path

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

moveTo(x ,y) Define the lineStart coordinate

lineTo(x,y) Define lineEnd coordinate

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

Example

Define the starting coordinates ( 0,0), and the end coordinate (200,100). Then use the stroke() method to draw the line:

     
   您的浏览器不支持 HTML5 canvas 标签。   

Program running result:

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

##arc(x,y,r,start,stop)

Example

     
   您的浏览器不支持 HTML5 canvas 标签。   

Canvas - Text

font- Define font

fillText(text,x,y)- Draw solid text on canvas

strokeText(text,x,y)- Draw hollow text on canvas

Example

     
   您的浏览器不支持 HTML5 canvas 标签。   

Program running result:

Canvas - Gradient

Gradient can be filled in rectangles, circles, lines, text, etc. Various shapes can be customized Define different colors.

There are two different ways to set the Canvas gradient:

createLinearGradient(x,y,x1,y1) - Create a line gradient

createRadialGradient(x,y,r,x1,y1,r1) - Create a radial/circular gradient

When we use gradient objects, we must use two or two Stop color above.

addColorStop()The method specifies the color stop. The parameters are described by coordinates, which can be 0 to 1.

Use gradient, set the value of fillStyle or strokeStyle to the gradient, Then draw a shape, such as a rectangle, text, or a line.

Example

Use createLinearGradient() to create a linear gradient. Fill the rectangle with gradient:

     
   您的浏览器不支持 HTML5 canvas 标签。   

Program running result:

##Example

     
   您的浏览器不支持 HTML5 canvas 标签。   

##Canvas - Image

You can put a picture on the canvas, so you can do some operations on the picture and add some materials you want, such as text.

Place an image on the canvasUse the following method:

drawImage(image,x,y)

Using images

Example

Place an image To the canvas:

     
  
使用图像:
 
画布:
  您的浏览器不支持 HTML5 canvas 标签。   

Program running result:

# #HTML Canvas Reference Manual

The complete attributes of the tag can be found in the Canvas Reference Manual.

The HTML tag