Shulou(Shulou.com)06/01 Report--

This article is about what the html canvas refers to. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The html canvas is a html rectangular area on which you can draw graphics, and you can control each pixel. Through the canvas element, you can add the canvas to the page with the syntax "".

This article operating environment: Windows10 system, html5 version, Dell G3 computer.

What is the html canvas?

A canvas is a HTML area on which you can draw graphics.

The canvas element is used to draw graphics on a web page.

The canvas element of HTML5 uses JavaScript to draw images on a web page.

The canvas is a rectangular area, and you can control each pixel.

Canvas has a variety of ways to draw paths, rectangles, circles, characters, and add images.

Create a Canvas element

Add a canvas element to the HTML5 page.

Specify the id, width, and height of the element:

Draw through JavaScript

The canvas element itself does not have the ability to draw. All drawing work must be done within JavaScript:

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

JavaScript uses id to find the canvas element:

Var c=document.getElementById ("myCanvas")

Then, create the context object:

Var cxt=c.getContext ("2d")

The getContext ("2d") object is a built-in HTML5 object with a variety of ways to draw paths, rectangles, circles, characters, and add images.

The following two lines of code draw a red rectangle:

Cxt.fillStyle= "# FF0000"; cxt.fillRect (0memrine 15015015075)

It is dyed red by fillStyle method, and the shape, position and size are specified by fillRect method.

Thank you for reading! This is the end of the article on "what the html canvas refers to". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.