The Canvas element is used to draw graphics on web pages.

What is canvas?

HTML5 elements are used for drawing graphics, which is done by scripting (usually JavaScript).

Labels are just containers for graphics, and you must use scripts to draw graphics.

You can use canvas to draw paths, boxes, circles, characters, and add images in a variety of ways.

Browser support

The numbers in the table indicate the first browser version number of the supported element.

Create a Canvas

A canvas in a web page is a rectangular box drawn by elements.

Note: By default, elements have no borders and no content.

A simple example is as follows:

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

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

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

Use the style attribute to add borders:

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

Effect display:

Use JavaScript to draw the image

The Canvas element itself has no drawing capability. All the drawing must be done inside JavaScript:

HTML code:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" > Your browser does not support the HTML5 canvas tag. </canvas></pre>Copy the code

Javascript code:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ,0,150,75 CTX. FillRect (0); </pre>Copy the code

Effect display:

Example:

First, find the element:

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

Then, create the context object:

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

The getContext(” 2D “) object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters, and adding images.

The following two lines draw a red rectangle:

ctx.fillStyle="#FF0000"; ,0,150,75 CTX. FillRect (0); </pre>Copy the code

Set the fillStyle property to a CSS color, gradient, or pattern. FillStyle defaults to #000000 (black).

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

Canvas coordinates

Canvas is a two-dimensional grid.

The top left corner of the canvas is (0,0)

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

This means: draw a 150×75 rectangle on the canvas, starting at the top left corner (0,0).

Coordinates the instance

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

Canvas path

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

  • MoveTo (x,y) defines the starting coordinates of a line
  • LineTo (x,y) defines the end coordinates of a line

To draw lines we must use the “ink” method, like stroke().

For example:

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

HTML code:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas></pre>

Javascript code:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); CTX. MoveTo (0, 0); CTX. LineTo (200100); ctx.stroke(); </pre>Copy the code

Effect display:

To draw a circle on the canvas, we’ll use the following javascript methods:

context.arc(<i>x</i>,<i>y</i>,<i>r</i>,<i>sAngle</i>,<i>eAngle</i>,<i>counterclockwise</i>);

The parameter value

Definitions and Usage

The arc() method creates arcs/curves (used to create circles or partial circles).

Tip: If you want to create circles through Arc (), set the starting Angle to 0 and the ending Angle to 2* math.pi.

Tip: Please use the stroke() or fill() methods to draw the actual arc on the canvas.

  • Center: the arc (100,75,50,0Math. PI, 1.5Math.PI)
  • Starting Angle: arc(100,75,50,0,1.5* math.pi)
  • End Angle: arc(100,75,50,0Math. PI, 1.5Math.PI)

We actually use “ink” methods for drawing circles, such as stroke() or fill().

The instance

Draw a circle using the Arc () method:

HTML code:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas></pre>Copy the code

Javascript code:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); CTX. Arc (95,50,40,0,2 * math.h PI); ctx.stroke(); </pre>Copy the code

Effect display:

Canvas – text

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

Font – Defines the font

FillText (text,x,y,maxWidth)- Draws solid text on the canvas

StrokeText (text,x,y,maxWidth)- Draws hollow text on the canvas

The parameter value

Use the fillText () :

The instance

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

HTML code:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas></pre>Copy the code

Javascript code:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; CTX. FillText (" Hello World ", 10, 50); </pre>Copy the code

Effect display:

Use the strokeText () :

The instance

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

HTML code:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas></pre>Copy the code

Javascript code:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; CTX. StrokeText (" Hello World ", 10, 50); </pre>Copy the code

Effect display:

Canvas – gradient

Gradients can be filled in rectangles, circles, lines, text, etc. Various shapes can define their own different colors.

There are two different ways to set the Canvas gradient:

The createLinearGradient() method creates a linear gradient object.

Tip: Please use the addColorStop() method to specify the different colors and where to locate the colors in the gradient object.

The addColorStop() method specifies the color and position in the gradient object. The addColorStop() method is used with either createLinearGradient() or createRadialGradient(). Note: You can call the addColorStop() method multiple times to change the gradient. If you do not use this method on the gradient object, the gradient will not be visible. To get a visible gradient, you need to create at least one color code. Gradient. addColorStop(stop,color); Stop, a value between 0.0 and 1.0, represents the position between the start and end of the gradient. Color The CSS color value displayed at the stop position. </pre>Copy the code

Javascript syntax

createLinearGradient(x,y,x1,y1)</pre>

The parameter value

The createLinearGradient() method creates a radial/circular gradient object.

JavaScript syntax:

createRadialGradient(x0,y0,r0,x1,y1,r1); </pre>

The parameter value

The instance

Create a linear gradient using createLinearGradient(). Fill the rectangle with gradient:

Javascript code:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var GRD =ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; CTX. FillRect,10,150,80 (10); </pre>Copy the code

Effect display:

The instance

Create a radial/circle gradient using createRadialGradient(). Fill the rectangle with gradient:

Javascript code:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var GRD = CTX. CreateRadialGradient (75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; CTX. FillRect,10,150,80 (10); </pre>Copy the code

Effect display:

Canvas images

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

drawImage(image,x,y)</pre>

HTML code:

<p>Image to use:</p> <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"> <p>Canvas:</p>  <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;" > Your browser does not support the HTML5 canvas tag. </canvas></pre>Copy the code

Javascript code:

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

img.onload = function() {
   ctx.drawImage(img,10,10);
}</pre>
Copy the code

Effect display: