What is Canvas? The H5

element is used for drawing graphics, which is done by script (usually JavaScript). The

tag is just a container for graphics that must be drawn using scripts.

Create a Canvas

A canvas in a web page is a rectangular box drawn by the

element. By default, the

element has no border and no content.

Ex. :

<canvas id="myCanvas" width="200" height="100"></canvas>
Copy the code
  • Tags usually need to specify an ID attribute (often referenced in scripts)
  • The width and height attributes define the canvas size

Use the style attribute to add borders:

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

Use JavaScript to draw the image

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

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0.0.150.75);
Copy the code

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).

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 location coordinates are displayed on the rectangle where the mouse moves.

Canvas path

methods describe
fill() Fills the current drawing (path)
stroke() Draws a defined path
beginPath() Start a path or reset the current path
moveTo() Moves the path to the specified point on the canvas without creating a line
closePath() Create a path from the current point back to the starting point
lineTo() Add a new point, and then create a line on the canvas from that point to the last specified point
clip() Cut areas of any shape and size from the original canvas
quadraticCurveTo() Create a quadratic Bezier curve
bezierCurveTo() Create a cubic Bezier curve
arc() Create arcs/curves (for creating circles or partial circles)
arcTo() Create an arc/curve between two tangents
isPointInPath() Returns true if the specified point is in the current path, false otherwise

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

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0.0);
ctx.lineTo(200.100);
ctx.stroke();
Copy the code

Draw a circle on the canvas

arc(x,y,r,start,stop)
Copy the code

Example: Draw a circle using the Arc () method:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95.50.40.0.2*Math.PI);
ctx.stroke();
Copy the code

Canvas text

attribute describe
font Define the font
fillText(text,x,y) Draw solid text on canvas
strokeText(text,x,y) Draw hollow text on canvas

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

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World".10.50);
Copy the code

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

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World".10.50);
Copy the code

Canvas gradient

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

methods describe
createLinearGradient() Create a linear gradient
createRadialGradient() Create a radial/circular gradient
createPattern() Repeats the specified element in the specified direction
addColorStop() Specifies the color and stop position in the gradient object

Example 1: Create a linear gradient. Fill the rectangle with gradient:

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);
Copy the code

Example 2: Create a radial/circular gradient. Fill the rectangle with gradient:

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