What is html canvas

WBOY
Release: 2022-03-28 14:18:58
Original
1836 people have browsed it

html canvas is an html rectangular area on which graphics can be drawn. Each pixel can be controlled. A canvas can be added to the page through the canvas element. The syntax is "".

What is html canvas

The operating environment of this article: Windows 10 system, html5 version, Dell G3 computer.

What is html canvas

The canvas is an HTML area on which graphics can be drawn.

The canvas element is used to draw graphics on web pages.

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

The canvas is a rectangular area that you can control every pixel of.

canvas has a variety of methods for drawing paths, rectangles, circles, characters, and adding images.

Create Canvas element

Add canvas element to HTML5 page.

Specify the id, width and height of the element:

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

Draw through JavaScript

The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
Copy after login

JavaScript uses id to find the canvas element:

var c=document.getElementById("myCanvas");
Copy after login

Then, create the context object:

var cxt=c.getContext("2d");
Copy after login

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:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
Copy after login

The fillStyle method dyes it red, and the fillRect method specifies the shape, position, and size.

Recommended tutorial: "html video tutorial"

The above is the detailed content of What is html canvas. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template