Home > Article > Web Front-end > How to draw graphics through Canvas tag
How to draw graphics through Canvas tag
- 藏色散人Original
- 2018-11-30 10:37:003748browse
How to draw graphics through the Canvas tag: first create an HTML sample file; then enter "" in the body; finally set the graphics through css attributes Just style it.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
The Canvas tag is a new element in HTML5. This tag is used for graphics drawing. HTML5 is the fifth major revision of Hypertext Markup Language (HTML), the core language of the World Wide Web and an application under Standard Universal Markup Language.
So for newbies who are learning HTML, they may not be clear about this tag element.
Below we can introduce to you the detailed explanation of the use of Canvas tag through simple examples.
canvas The sample code for drawing a simple canvas graphic (rectangle) is as follows:
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>Canvas简单使用示例</title>
<style type="text/css">
#FirstCanvas{
width: 450px;
height: 300px;
border: 3px solid #3262ff;
background-color: #acffcb;
}
</style>
</head>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>Recommended reference study: "HTML5 Tutorial"
The graphic effect is as follows:
It should be noted here that by default the
This article is about drawing simple canvas graphics through the canvas tag. It is very simple and easy to understand. I hope it will be helpful to friends in need!
The above is the detailed content of How to draw graphics through Canvas tag. For more information, please follow other related articles on the PHP Chinese website!