HTML Canvas - 环境设置

画布的最佳应用之一是它可以在任何配备 HTML5 和 JavaScript 支持的浏览器上运行。这使得它用途广泛且易于使用。当今所有可用的浏览器（例如 Chrome、Opera、Mozilla、Edge 和 Safari）都配备了 JavaScript 支持。因此，任何可用于显示 HTML 和 JavaScript 代码的编辑器都可用于处理 HTML5 Canvas 元素。此外，您的浏览器必须有权访问和执行 JavaScript 代码。下表包含可支持 HTML5 画布的浏览器名称和版本号。

浏览器名称	画布支持
谷歌浏览器	4.0及以上
微软边缘	9.0及以上
火狐浏览器	2.0及以上
歌剧	3.1及以上
苹果浏览器	9.0及以上

下面列出了使用Canvas元素实现2D动态图形设计和可视化效果所需的基本要求

文本编辑器

用于编写代码。这可以是任何文本编辑器，例如 Visual Studio Code (VS code)、Notepad++、Sublime Text 或 Atom。我们不能使用文档编辑器来创建 Canvas 元素，因为我们不能仅在混合编辑器中使用 JavaScript。我推荐 Sublime Text 或 Visual Studio Code，因为它们非常容易编写脚本。Visual Studio Code 附带一个内置的本地服务器，可以使用随机端口在本地服务器上运行 Web 程序。Sublime Text 配备了简单的工具，使其更易于使用和处理。还有一些在线编译器，例如 codepen.io，无需下载任何 IDE 即可更轻松地进行工作。

网络浏览器

测试网页中的代码并了解其结构。目前，最常用的浏览器是 Mozilla Firefox、Google Chrome、Microsoft Edge、Opera 浏览器和 Apple Safari。您还应该测试您的网站在移动设备和目标受众可能仍在使用的任何旧浏览器（例如 IE 8-10）上的性能。这有助于改进和理解 Canvas 元素如何与网页交互。还有一些不同的 Web 浏览器，例如 Lynx，这是一种基于文本的终端 Web 浏览器，用于查看视障用户对您的网站的体验。您还可以使用 Explorer-canvas 通过 Internet Explorer 获得画布支持。为了使其工作，我们必须在代码中包含以下 JavaScript 片段

<!--[if IE]><script src = "canvas.js"></script><![endif]-->

确认

执行以下示例检查编辑器是否正常工作

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check editor</title>
</head>
<body>
   <p>Hello viewers</p>
   <canvas id="canvas" width="300" height="150" style="border: 2px solid black;">
      This text is displayed if your browser does not support HTML5 Canvas or if JavaScript is disabled.
   </canvas>
</body>
</html>

如果编辑器创建一个包含字符串“Helloviewers”和一个小空心矩形的网页，则说明编辑器已正确安装。如果网页未呈现任何内容，则安装未正确完成。仅当 Web 浏览器不支持 Canvas 元素时，才会显示 Canvas 标记内的可用文本。您需要更新您的浏览器或安装支持 Canvas 元素的浏览器。