html5 canvas word,使用 HTML5 Canvas 进行数据可视化

图 1 已设置样式的空白 Canvas 元素

使用画布时，您将在 JavaScript 中执行大多数工作，可通过 JavaScript 利用画布绘图上下文公开的 API 来操作图面的每个像素。要获取画布绘图上下文，您需要从 DOM 获得您的 canvas 元素，然后调用该元素的 getContext 方法。

var _canvas = document.getElementById('chart');

var _ctx = _canvas.getContext("2d");

GetContext 返回一个对象，其中包含可用于在相关画布上绘图的 API。该方法的第一个参数(在本例中为“2d”)指定我们要用于画布的绘图 API。“2d”指的是我之前提到的 HTML Canvas 2D

Context。您可能已经猜到，2D 表示这是一个二维绘图上下文。到撰写本文时为止，2D Context 是唯一受到广泛支持的绘图上下文，我们将在本文中使用该上下文。围绕 3D 绘图上下文的工作和试验正在进行当中，因此将来画布应该能够为我们的应用程序提供更多功能。

绘制线条、形状和文本

现在页面上已经有了 canvas 元素，并且我们已经在 JavaScript 中获取了其绘图上下文，我们可以开始添加内容了。因为我想重点介绍数据可视化，所以我将使用画布绘制一个条形图来表示一个虚构