Javascript 简明教程
JavaScript - Canvas
Handling Canvas with JavaScript
HTML <canvas> 元素可用于创建图形并在网页上绘制图形。它可以在网页上绘制各种图形或形状（如线条、圆形等），并对它们进行动画处理。
你可以在 HTML 中定义 <canvas> 元素，然后需要使用 JavaScript 在网页上绘制图形。让我们看看在 HTML 中定义 canvas 元素和使用 JavaScript 操作代码语法。
Syntax
使用以下语法创建 HTML canvas 元素。
<canvas id="myCanvas" width="480" height="320">
Your browser does not support the HTML canvas tag.
</canvas>在上述语法中，我们使用了 ID 为“myCanvas”的 HTML <canvas> 元素。当浏览器不支持 <canvas> 元素时，将显示写在 <canvas> 标签之间的信息。
我们使用文档对象的方法 getElementById() 来访问 Canvas 元素。查看下面的语法 −
var canvas = document.getElementById('canvas_id');
var ctx = canvas.getContext('2d');在 JavaScript 中，我们可以使用 getContext('2d') 方法来获取画布（Canvas）的上下文。接下来，我们可以使用不同的方法来绘制图形并填充颜色，其中将“ctx”变量作为引用。
Examples
Example: Drawing a rectangle
在下面的代码中，我们在 HTML 中添加了 <canvas> 元素。
在 JavaScript 中，我们使用了 getContext('2d') 方法来访问画布（Canvas）的上下文。然后，我们使用 fillstyle() 方法来为画布（Canvas）中的元素填充颜色。fillRect() 方法用于绘制矩形。它取画布中 4 个角的坐标。
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing Rectangle on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// Getting the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Drawing rectangle using canvas
ctx.fillStyle = "#FF0000";
ctx.fillRect(50,30, 470, 240);
</script>
</body>
</html>Example: Drawing a circle
在下面的代码中，我们使用 arc() 方法绘制一个圆形。它采用圆形位置的坐标作为前两个参数，并将圆形的半径作为第三个参数。
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing circle on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
// Getting the 2D context of the canvas
var ctx = c.getContext("2d");
// Drawing circle using canvas
ctx.beginPath();
ctx.arc(300, 150, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "green";
ctx.fill();
</script>
</body>
</html>Example: Drawing a lines
在下面的代码中，我们使用了 moveTo() 和 lineTo() 方法绘制了线条。moveTo() 方法将线的起点作为参数，lineTo() 方法将线的终点作为参数。
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing lines on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// Getting the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Drawing lines using canvas
ctx.moveTo(0, 0);
ctx.lineTo(300, 200);
ctx.stroke();
ctx.moveTo(300, 200);
ctx.lineTo(400, 0);
ctx.stroke();
</script>
</body>
</html>Example: Drawing a Linear gradient
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing linear gradient on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// Getting the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Drawing a linear gradient
ctx.beginPath();
var grd = ctx.createLinearGradient(0, 0, 440, 0);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 550, 240);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>Example: Text Rendering
在下文示例中，我们已在画布上呈现文本消息“Hello”。为此，我们使用了填充文本（）方法。HTML 画布中的填充文本（）方法在画布元素上绘制文本字符串。
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Rendering text on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "200" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
// Getting the 2D context of the canvas
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Hello, Canvas!', 150, 100);
</script>
</body>
</html>我们已学会在 HTML 中使用 <canvas> 元素并通过使用 JavaScript 访问 DOM 元素来绘制图形。我们可以绘制各种形状，并为形状添加颜色。