What is the canvas tag in HTML5

The canvas tag in HTML5 is "". The canvas tag is used for drawing graphics. It is just a rectangular graphics container. Drawing graphics must be done through scripts (usually JavaScript); developers can use a variety of js methods to draw paths, boxes, circles, characters, and Add images and more.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

The canvas tag in HTML5 is "".

The canvas tag is used for drawing graphics. It is just a rectangular graphics container. Drawing graphics must be done through scripts (usually JavaScript).

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

Create a canvas (Canvas)

A canvas is a rectangular frame in a web page, drawn through the element.

Note: By default, the element has no borders and content.

A simple example is as follows:

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

Note: The tag usually needs 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 the style attribute to add borders:

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

##Use JavaScript to draw images

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

HTML code:

<canvas id="myCanvas" width="200"  style="max-width:90%" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

javascript code:

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

Example analysis :

First, find the element:

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

Then, create the context object:

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

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

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 coordinates

canvas 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 150×75 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 lines on the Canvas, we will use the following two methods:

• moveTo(x,y) defines the starting coordinates of the line

• lineTo(x,y) defines the ending coordinates of the line

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

Example:

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

HTML code:

<canvas id="myCanvas" width="200"  style="max-width:90%" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>

javascript code:

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

##Draw a circle in canvas shape, we will use the following javascript method:

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

Parameter values:

##Definition and usage

arc() method creates arc/ Curves (used to create circles or partial circles).

Tip: If you need to create a circle through arc(), please set the starting angle to 0 and the ending angle to 2*Math.PI.

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

Center: arc(100,75,50,0Math.PI,1.5Math.PI)

• Starting angle: arc(100,75,50,0,1.5*Math.PI)

• Ending angle: arc(100,75,50,0Math.PI,1.5 Math.PI)

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

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

(Learning video sharing: html video tutorial, web front-end)

The above is the detailed content of What is the canvas tag in HTML5. For more information, please follow other related articles on the PHP Chinese website!