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
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('tutorial');
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:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
