What is the use of html5 canvas? Detailed explanation of the latest canvas element in HTML5-H5 Tutorial-php.cn

What is the use of html5 canvas? Detailed explanation of the latest canvas element in HTML5

寻∝梦

Release： 2018-08-13 18:52:02

Original

2528 people have browsed it

HTML5 has many new elements, but it is to make it more convenient for us to create more beautiful web pages. Now let us take a look at the element I introduce below

HTML5 Canvas

Last modified on August 1, 2017

tags define graphics, such as charts and other images, and you must use scripts to draw graphics.

Draw a red rectangle, gradient rectangle, colored rectangle, and some colored text on the canvas.

What is Canvas?

HTML5 element is used for drawing graphics, which is done through scripts (usually JavaScript).

The tag is just a graphics container , you must use a script to draw the graph.

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

html5 What is canvas used for?

HTML5 The

Browser support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the element.

Note: Internet Explorer 8 and earlier IE versions The browser does not support the element.

Create a canvas (Canvas)

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

Note: By default The element has no borders and no content.

A simple example is as follows, such as:

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

Copy after login

Note: The label 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

Use the style attribute to add borders, such as:

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

Copy after login

Example analysis:

First , find the

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

Then, create the context object:

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

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 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 fillStyle setting 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 150x75 rectangle on the canvas, starting from the upper left corner (0,0).

Canvas - Path

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

moveTo(x,y) Define the starting coordinates of the line

lineTo(x,y) defines the end coordinate of the line

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

This is an example:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

Copy after login

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

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

Actually we use " ink" method, such as stroke() or fill()

Another example:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Copy after login

Your browser does not support the HTML5 canvas tag.

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

Copy after login

Canvas - Text

Use canvas to draw text. The important properties and methods are as follows:

font - Define font

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

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

Canvas - Gradient

Gradient can be filled in rectangles, circles, lines, text, etc. Various shapes can be defined with 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 more stop colors.

The addColorStop() 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, and then draw a shape, such as a rectangle , text, or a line.

[Related recommendations]

The basic elements of html, allowing you to learn HTML from scratch

New tags in HTML5 centent

The above is the detailed content of What is the use of html5 canvas? Detailed explanation of the latest canvas element in HTML5. For more information, please follow other related articles on the PHP Chinese website!