如何在 HTML5 中使用 Canvas 绘制图形?
在 HTML5 中，我们可以使用 Canvas 元素在网页上绘制 2D 图形。要绘制 Canvas 图形，我们使用 <canvas> 标签来创建交互式图形，并使用动画将其渲染到 Web 浏览器。Canvas 元素仅在 HTML 5 中可用，之前的版本中不可用。它可以在游戏和数据领域生成复杂的可视化效果，帮助开发人员直观地展示作品。在本文中，我们将通过各种示例学习如何使用 Canvas 元素绘制基本的 2D 图形设计。
语法
<canvas id="id_name">……编写一些文本……</canvas>
此元素用于绘制几何图形。 id 选择器会定位到具有指定 id 属性的单个元素。
var var_name = getElementById("id_name")
var 是 JavaScript 中用于定义变量的关键字。var_name 是用户设置的变量名。 getElementById("id_name") 匹配特定的 id。
使用的属性
示例中使用的属性如下:-
color - 定义文本的颜色。
width - 定义画布图形的宽度。
height - 定义画布图形的高度。
HTML Canvas 引用
示例中使用的引用如下:-
getContext() - 此方法将图形设置为 2D 格式。
beginPath() - begin 方法开始起始路径并结束最后一个路径。
rect() − 此方法绘制矩形。
stroke() − 此方法绘制画布图形的路径。
strokeStyle() − 此方法填充画布中几何形状的颜色边框。
fillStyle() − 此方法填充图形几何形状的颜色。
fill() − 此方法填充画布中当前绘制的几何形状。
lineTo() − 此方法添加新线并从现有点创建线。
moveTo() − 此方法移动画布。
closePath() − 此方法创建一条从最近点返回起始点的路径。
示例 1
以下示例代码展示了如何使用 HTML5 Canvas 和 JavaScript 绘制一个矩形。网页标题为"Canvas Shapes"，文本"使用 Canvas 绘制的矩形"为红色。代码生成一个 ID 为"rectangle"的 Canvas 元素，其宽度和高度均为 200 像素。JavaScript 中的"rect()"方法用于在画布上绘制矩形，并指定其位置、宽度和高度。最后，通过调用"stroke()"方法，使用标准黑色绘制矩形。
<!DOCTYPE html>
<html>
<title>Rectangle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:red;">Canvas Shapes</h1>
<h3>Rectangle</h3>
<canvas id="rectangle" width="200" height="200" />
<script>
var rg = document.getElementById("rectangle");
var rect = rg.getContext("2d");
rect.beginPath();
rect.rect(10, 10, 170, 100);
rect.stroke();
</script>
</center>
</body>
</html>
示例 2
以下示例使用 HTML 和 JavaScript，代码创建一个 Canvas 元素，并在其内部绘制一个红色圆圈。该圆圈半径为 50 像素，圆心坐标为 (150, 150)。strokeStyle 属性用于将圆圈轮廓设置为深蓝色，fillStyle 属性用于将圆圈填充为红色。要绘制圆圈，请使用 arc() 方法并指定圆心、半径以及以弧度为单位的起始角和终止角。Canvas 标签的 ID 为"circle"，用于在 JavaScript 代码中访问 Canvas 元素。为了使 Canvas 元素在网页上水平居中，代码包含在 center 标签中。
<!DOCTYPE html>
<html>
<title>Cirle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:red;">Canvas Shapes</h1>
<h2>Circle</h2>
<canvas id="circle" width="290" height="250" >
<script>
var cle = document.getElementById("circle");
var ctx = cle.getContext("2d");
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2*Math.PI );
ctx.strokeStyle = 'darkblue ';
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
</center>
</body>
</html>
示例 3
以下示例代码展示了如何使用 JavaScript 在 HTML5 画布上绘制三角形。网页标题为"使用画布绘制三角形"，绿色标题下写着"画布形状"。代码生成一个 ID 为"triangle"的画布元素，尺寸为 100 像素 x 200 像素。该三角形使用 JavaScript 绘制，首先使用"moveTo()"方法设置画笔的初始位置，然后使用"lineTo()"方法绘制连接三角形顶点的线条。最后，使用"stroke()"方法绘制三角形轮廓。最后使用"closePath()"方法闭合三角形的路径，从而完成形状。
<!DOCTYPE html>
<html>
<title>Triangle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:green;">Canvas Shapes</h1>
<h2>Triangle</h2>
<canvas id="triangle" width="100" height="200" >
<script>
var tr = document.getElementById("triangle");
var tri = tr.getContext("2d");
tri.beginPath()
tri.moveTo(0, 50);
tri.lineTo(50, 0);
tri.lineTo(100, 50);
tri.lineTo(0, 50);
tri.stroke();
tri.closePath();
</script>
</center>
</body>
</html>
结论
我们通过绘制不同形状的画布图形探索了这三个示例。然后，我们了解了如何使用引用来设置画布图形的属性。画布元素的样式是通过 CSS 属性设置的。上述几何图形是用 Cavas 绘制的，但也可以使用 SVG 元素绘制。
