What's the use of HTML5 canvas? HTML5 the latest canvas elements

HTML5 a lot of new elements, but is to make it easier for us to make more beautiful pages out, now let's take a look at the following I introduce this kind of element bar

HTML5 Canvas

Last modified August 01, 2017

Labels define graphs, tables, and other images, and you must use scripts to draw graphics.

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

What is Canvas?

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

Labels are just graphics containers, and you must use scripts to draw graphics.

There are several ways you can use Canva to draw paths, boxes, circles, characters, and add images.

What's the use of HTML5 canvas?

HTML5 <canvas> tags are used to draw images (through scripting, usually JavaScript). However, the,<canvas> element itself does not have the ability to draw (it is just a container for graphics)-You must use a script to accomplish the actual drawing task. The GetContext () method returns an object that provides methods and properties for drawing on the canvas.

Browser support

Internet Explorer + +, Firefox, Opera, Chrome, and Safari support elements.

Note: Internet Explorer 8 and earlier versions of IE browsers do not support elements.

Create a canvas (canvases)

A canvas is a rectangular box in a Web page that is drawn with elements.

Note: By default, the element does not have a border and content.

A simple example is as follows:

<canvas id= "MyCanvas" width= "height=" ></canvas>

Note: Labels typically need to specify an id attribute (often referenced in the script), and the width and Height properties define the size of the canvas.

Tip: You can use multiple <canvas> elements in an HTML page.

Use the Style property to add a border, such as:

<canvas id= "MyCanvas" width= "" "height=", "style=" border:1px solid #000000; ></canvas>

Instance parsing:

First, find the <canvas> element:

var C=document.getelementbyid ("MyCanvas");

Then, create the context object:

var Ctx=c.getcontext ("2d");

GetContext ("2d") objects are built-in HTML5 objects that have a variety of drawing paths, rectangles, circles, characters, and methods for adding images.

The following two lines of code draw a red rectangle:

Ctx.fillstyle= "#FF0000";

Ctx.fillrect (0,0,150,75);

Setting the FillStyle property can be a CSS color, gradient, or pattern. FillStyle default setting is #000000 (black).

The FillRect (X,y,width,height) method defines how the rectangle is currently filled.

Canvas coordinates

A canvas is a two-dimensional grid.

The upper-left corner coordinates of the canvas are (0,0)

The FillRect method above has parameters (0,0,150,75).

This means: Draw the 150x75 rectangle on the canvas, starting at the top left corner (0,0).

Canvas-Path

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

MoveTo (x, y) defines line start coordinates

LineTo (x, y) defines line end coordinates

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

Here is an example:

<! DOCTYPE html>
To draw a circle in the canvas, we will use the following methods:

Arc (X,y,r,start,stop)

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

Again an example:

<! DOCTYPE html>
Your browser does not support HTML5 canvas tags. </canvas>

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

Using canvas to draw text, important properties and methods are as follows:

font-Define Fonts

Filltext (Text,x,y)-draws solid text on canvas

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

Canvas-Gradient

Gradients can be filled in rectangles, circles, lines, text, and so on, and various shapes can define different colors themselves.

There are two different ways to set up the canvas gradient:

Createlineargradient (x,y,x1,y1)-Create a line gradient

Createradialgradient (X,Y,R,X1,Y1,R1)-Create a radial/circle gradient

When we use a Gradient object, you must use two or more stop colors.

The Addcolorstop () method specifies that the color stops, and the parameters are described using coordinates, which can be between 0 and 1.

Using a gradient, set the value of FillStyle or Strokestyle to a gradient, and then draw a shape, such as a rectangle, text, or a line.

"Recommended"

HTML base element that gives you 0 basic learning HTML

New tags in HTML5 centent