Home > Article > Web Front-end > What does the Canvas tag mean?

What does the Canvas tag mean?

云罗郡主Original: 2019-01-26 10:55:299002browse

Canvas is an HTML element into which images can be drawn using scripts (usually JavaScript). It can be used to create photo albums or create simple (and not so simple) animations, or even for real-time video processing and rendering.

In HTML, the canvas tag is used to define graphics, such as charts and other images. Scripts must be used to draw graphics, such as drawing a red rectangle, gradient rectangle on the canvas. , a colored rectangle, and some colored text.

1. What is canvas?

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

The canvas tag is just a graphics container, you must Use scripts to draw graphics.

You can use canvas to draw paths, boxes, circles, characters and add images in a variety of ways.

2.Basic use of Canvas

style="border:1px solid #000000 ;">

2.1 The

If the widht and height attributes are not set for

2.2 Case

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById(&#39;tutorial&#39;);
    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";
      //绘制矩形
    ctx.fillRect (10, 10, 55, 50);
 
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</body>
</html>

The effect is as follows:

What does the Canvas tag mean?

The above is the detailed content of What does the Canvas tag mean?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html border 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：What does WebSocket mean in HTML5Next article：What does WebSocket mean in HTML5

See more

What does the Canvas tag mean?

Related articles