Canvas Intro
Canvas Intro （画布简介）
The HTML <canvas> element is used for drawing graphics via scripting. It is only a container for graphics. You need JavaScript to draw the graphics.
Canvas has multiple methods for drawing paths, circles, boxes, text, as well as for adding images. （画布有多种绘制路径、圆圈、框、文本以及添加图像的方法。）
Canvas can be used to draw colorful texts, with or without animation. Besides, they can be animated. This means that canvas objects can move. （画布可用于绘制彩色文本，有或没有动画。此外，它们还可以被动画化。这意味着画布对象可以移动。）
More than one <canvas> elements can be on one HTML page.
Canvas is a rectangular area, and by default, it has no border or content. （画布是一个矩形区域，默认情况下，它没有边框或内容。）
<canvas id="canvas" width="250" height="150"></canvas>
Always use an id attribute, and a width and height attribute to define the size of the canvas. Use the style attribute to add a border. （>始终使用id属性以及width和height属性来定义画布的大小。使用样式属性添加边框。）
Example of the HTML <canvas> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px solid #1c87c9;">
The HTML5 canvas tag is not supported by your browser..
（您的浏览器不支持HTML5画布标签。）
</canvas>
</body>
</html>
Example of the HTML <canvas> tag to draw a circle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="200" height="200" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser..
（您的浏览器不支持HTML5画布标签。）
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 60, 0, 2 * Math.PI);
ctx.strokeStyle = '#009299';
ctx.stroke();
</script>
</body>
</html>
Example of the HTML <canvas> tag to draw a text:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="350" height="110" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
（您的浏览器不支持HTML5画布标签。）
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillStyle = '#262ac7';
ctx.fillText("Canvas Text", 55, 65);
</script>
</body>
</html>
Example of the HTML <canvas> tag to draw a linear gradient:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="140" style="border:1px solid #dddddd;">
The HTML5 canvas tag is not supported by your browser.
（您的浏览器不支持HTML5画布标签。）
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "#359900");
grd.addColorStop(1, "#ffffff");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 250, 100);
</script>
</body>
</html>
Example of the HTML <canvas> tag to draw a line:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="150" height="150" style="border:1px solid #cccccc;">
The HTML5 canvas tag is not supported by your browser.
（您的浏览器不支持HTML5画布标签。）
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(150, 150);
ctx.strokeStyle = '#86417d';
ctx.stroke();
</script>
</body>
</html>
Example of the HTML <canvas> tag to draw an image:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>
<h2>Original image</h2>
<img id="flower" src="https://images.unsplash.com/photo-1485431142439-206ba3a9383e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="500" height="379">
</div>
<h2>Draw an image with canvas</h2>
<canvas id="exampleCanvas"></canvas>
<script>
const canvas = document.getElementById('exampleCanvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('flower');
image.addEventListener('load', e => {
ctx.drawImage(image, 80, 80, 350, 200, 10, 10, 150, 100);
});
</script>
</body>
</html>
Example of the HTML <canvas> tag to draw a circular gradient:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="260" height="160" style="border:1px solid #cdcdcd;">
The HTML5 canvas tag is not supported by your browser.
（您的浏览器不支持HTML5画布标签。）
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(150, 75, 10, 115, 90, 150);
grd.addColorStop(0, "purple");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 220, 120);
</script>
</body>
</html>