如何将 HTML5 Canvas 元素与 JavaScript 结合使用
（本文最初发表于我的博客，链接 在此 ）。
在 HTML5 引入 Web 开发领域之前，网页设计枯燥乏味、令人沮丧，而且实现起来也十分复杂。例如，任何需要创建图形和动画的开发者都不得不依赖 Flash 插件或 Java 插件之类的工具——这既繁琐又令人头晕目眩。
拥有七年多网页开发经验并目前教授他人技能的尼基特卡表示，“名为 Canvas 的强大 HTML5 元素的出现改变了一切，使开发人员能够完成以前难以完成的操作。”
什么是HTML5 Canvas？
Canvas 是一个 HTML5 元素，它允许您使用无处不在的 JavaScript 编程语言轻松、强大地即时绘制图形。
这元素仅用作图形容器；因此，您应该使用 JavaScript 来渲染图形。
您可以使用 Canvas 元素在您的 Web 应用程序中实现各种目标，包括绘制图表、创建 HTML Canvas 动画、开发游戏或创建照片——所有这些都无需依赖其他外部工具。
令人惊叹的是，Canvas 以 API 的形式提供，并受到大多数现代浏览器和平台的支持。此外，它还具有跨平台兼容性。因此，您只需创建一次应用程序，即可将其部署到任何地方——无论是 PC 还是移动设备。
我们来看一段 Canvas 标记代码。
以下是 HTML5 Canvas 元素的简单标记：
<canvas width="320" height="160" id="canvasExample"></canvas>
如上代码所示，Canvas 元素允许设置两个特定属性：宽度和高度。如果您不为这两个属性提供值，Canvas 将使用默认值，即宽度为 300 像素，高度为 150 像素。
id属性用于在 JavaScript 代码中标识 Canvas 元素。此外，您还可以添加其他 CSS 样式属性，例如内边距、背景颜色或边框，使画布绘制区域更具交互性和可见性——就像其他 HTML 元素一样。
如何在画布上作画
要在 Canvas 上创建图形，首先需要使用文档对象模型 (DOM) 来定位它。
此外，id属性将帮助您识别匹配的目标位置（在本 HTML Canvas 示例中，id 为“canvasExample”）。
元素初始状态为空白。因此，要显示内容，JavaScript 脚本必须先获取渲染上下文才能在其上绘制。
Canvas 元素内置了一个名为getContext 的DOM 方法。这是一个 JavaScript 函数，用于访问渲染上下文及其绘制方法。该函数接受一个参数，通常是 2D 图形上下文（定义为“2d”）。
JavaScript Canvas 代码示例
例如，要在 Canvas 上创建一个矩形，您需要以下属性和函数：
- fillStyle = “color” ——为形状添加颜色；否则，形状默认为黑色。
- fillRect(x,y,width,height) —绘制一个填充矩形
- strokeRect(x,y,width,height) ——它为矩形赋予轮廓
- clearRect(x,y,width,height) — 清除指定的矩形区域，使其完全透明
坐标系采用画布网格或坐标系定义。在该坐标系中，原始尺寸位于画布区域的左上角，坐标为 (0,0)。*
因此，X 坐标将向右移动，而 Y 坐标将向下移动。距离单位为像素。
下图展示了 Canvas Grid 系统的工作原理：
上述每个用于创建矩形的函数都接受以下参数来表示坐标和尺寸：
- x 表示从左上角到右侧的水平位置
- y 表示从左上角到底部的垂直位置
- width 表示矩形的宽度。
- height 表示矩形的高度。
以下是一个使用 JavaScript canvas 绘制矩形的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript HTML5 Canvas Example</title>
</head>
<body onload="canvasExample()">
<canvas width="320" height="160" id="canvasExample"></canvas>
<script>
function canvasExample(){
//identify the Canvas element via the DOM
var canvas = document.getElementById("canvasExample");
//checking for Canvas browser compatibility
if(canvas.getContext){
//Use getContext to specify the rendering context
var context = canvas.getContext('2d');
//setting of color
context.fillStyle = "blue";
//creating the rectangle
context.fillRect(50,50,150,250);
context.clearRect(75,75,100,50);
context.strokeRect(90,90,75,20);
}else{
//providing a fallback option
alert("Please a Canvas-Supporting Web Browser");
}
}
</script>
</body>
</html>
以下是浏览器中的输出结果：
以下是 JavaScript 脚本中发生的情况：
- 首先通过 DOM 识别 Canvas 元素。
- 上下文已定义
- fillRect() 函数会生成一个 150 x 250 像素的矩形。
- clearRect() 函数随后从中心删除一个 100 x 50 像素的矩形。
- 最后，strokeRect() 函数在清除区域内构造一个 75×20 像素的矩形。
总结
如本 HTML5 Canvas 示例所示，此元素允许您使用 JavaScript 在 Web 浏览器上动态渲染图形。
Canvas之所以出色，是因为它完全开源、高度交互且非常灵活。它能为您的应用程序增添活力并提升其性能。
因此，你需要学习它的工作原理，并将你的网页开发技能提升到一个新的水平。
一切顺利。
文章来源：https://dev.to/educationecosystem/how-to-use-the-html5-canvas-element-with-javascript-267n