HTML 画布 - 环境设置

画布最佳应用之一是它可以在任何支持 HTML5 和 JavaScript 的浏览器上运行。这使其非常通用且易于使用。目前所有可用的浏览器，如 Chrome、Opera、Mozilla、Edge 和 Safari，都支持 JavaScript。因此，任何可用于显示 HTML 和 JavaScript 代码的编辑器都可以用于处理 HTML5 Canvas 元素。此外，必须允许您的浏览器访问并执行 JavaScript 代码。下表包含支持 HTML5 画布的浏览器名称和版本号。

浏览器名称	画布支持
谷歌 Chrome	4.0 及以上
微软 Edge	9.0 及以上
Mozilla Firefox	2.0 及以上
Opera	3.1 及以上
苹果 Safari	9.0 及以上

使用 Canvas 元素实现二维动态图形设计和可视化效果所需的基本要求如下所示

文本编辑器

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

网络浏览器

在网页中测试代码并了解其结构。目前，使用最广泛的浏览器是 Mozilla Firefox、谷歌 Chrome、微软 Edge、Opera 浏览器和苹果 Safari。您还应该测试您的网站在移动设备上的性能以及目标受众可能仍在使用的任何旧浏览器（例如 IE 8-10）上的性能。这有助于改进和了解 Canvas 元素如何与网页交互。还有一些不同的网络浏览器，例如 Lynx，这是一个基于文本的终端网络浏览器，用于查看视障用户如何体验您的网站。您还可以使用 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>

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

打印页面