canvas绘图

Canvas 绘图是一种用于在网页上创建动态、交互式图形的技术。Canvas 绘图基于 HTML5 标准，可以使用 JavaScript 在网页上创建动画、游戏、图表等各种可视化效果。

Canvas 绘图有两个重要的对象：canvas 和 context。通过 canvas 对象，可以创建一个画布来显示图形；通过 context 对象，可以设置画布的属性，如颜色、线条样式、字体等，还可以在画布上绘制各种图形，如线条、矩形、圆形、文本等。

以下是一个简单的 Canvas 绘图示例：

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>

这段代码创建了一个宽度为 200，高度为 100 的画布，并在画布上绘制了一个红色矩形。其中，`canvas` 是 canvas 对象，`ctx` 是 context 对象，`fillStyle` 是设置填充颜色的属性，`fillRect` 是绘制矩形的方法。

Canvas 绘图还可以使用一些辅助库，如 D3.js、Chart.js 等，来实现更复杂的可视化效果。