HTML5 Canvas
<canvas></canvas> is a new tag that appears in HTML5. Like all DOM objects, it has its own properties, methods and events. Among them is the drawing method, which js can call for drawing. .
What is Canvas?
HTML5 <canvas> element is used for drawing graphics, which is done through scripts (usually JavaScript).
<canvas> tag is just Graphics container, you must use a script to draw the graphics.
You can use Canva to draw paths, boxes, circles, characters and add images in a variety of ways.
Basically all browsers support the <canvas> element except IE8 and previous versions
There are two methods for drawing images using the canvas element. They are
context.fill()//Fill
context.stroke()//Draw the border
style: Before drawing graphics, the drawing style must be set
context.fillStyle//Filled style
## context. strokeStyle//Border style
context.lineWidth//Graphic border width
Color representation:
Use the color name directly: "red" with with "blue" to 1-255,1-255) rgba(1-255,1-255,1-255, transparency)Use Canvas Draw a straight line:<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30);//第一个起点
cans.lineTo(120,90);//第二个点
cans.lineTo(220,60);//第三个点（以第二个点为起点）
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Canvas coordinatescanvas is a two-dimensional grid.
The coordinates of the upper left corner of canvas are (0,0)<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = 'yellow';
cans.fillRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Note: A method is used here - fillRect(). From the literal meaning, you can also know that this is to fill a rectangle. The parameters here are worth explaining fillRect(X,Y,Width,Height) , this is different from the coordinates in mathematics. The X and Y here start from the starting point relative to the upper left corner of the Canvas. Remember! !
##Round
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Note: The usage of the arc method here is arc(X,Y,Radius,startAngle,endAngle,anticlockwise), which means (X coordinate of the center of the circle, Y coordinate of the center of the circle, radius, start angle (radians), end angle radian, whether according to Draw clockwise);
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var gnt1 = cans.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red');
gnt1.addColorStop(0.5,'green');
gnt1.addColorStop(1,'blue');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Canvas - Text text: The text to be drawn x: The x-coordinate axis of the starting point of the text y: The y-coordinate axis of the starting point of the text context.font: Set font stylecontext.textAlign: Horizontal alignment
start, end, right, center
context.textBaseline: Vertical alignment
top, hanging, middle, alphabetic, ideographic、bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.font = 'bold 144px consolas';
cans.textAlign = 'left';
cans.textBaseline = 'top';
cans.strokeStyle = '#DF5326';
cans.strokeText('Hello', 100, 100);
cans.font = 'bold 144px arial';
cans.fillStyle = 'red';
cans.fillText('World', 300,300);
}
function img_click(){
var can = $$('can');
var cans = can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
