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

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

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

Example analysis :

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

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

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

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

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

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