Home >Web Front-end >H5 Tutorial >What is the use of html5 canvas? Detailed explanation of the latest canvas element in HTML5

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

寻∝梦Original: 2018-08-13 18:52:022531browse

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 5ba626b379994d53f7acf72a64f9b697 tag is used to draw images (via script, usually JavaScript). However, the 5ba626b379994d53f7acf72a64f9b697 element itself has no drawing capabilities (it's just a container for graphics) - you have to use a script to do the actual drawing. The getContext() method returns an object that provides methods and properties for drawing on the canvas.

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>

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 5ba626b379994d53f7acf72a64f9b697 elements in HTML pages.

Use the style attribute to add borders, such as:

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

Example analysis:

First , find the 5ba626b379994d53f7acf72a64f9b697 element:

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>

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;">

Your browser does not support the HTML5 canvas tag. c2caaf3fc160dd2513ce82f021917f8b

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

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!

JavaScript html5 firefox css chrome safari html var 对象 canvas

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed analysis of audio in HTML5Next article：Detailed analysis of audio in HTML5

See more

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

Related articles