菜鸟教程
教程 html tutorial

canvas 与图形

HTML5 中的 <canvas> 标签是一个用于绘制图形的画布区域。它本身是一个容器，依赖 JavaScript 来绘制各种二维图形和动画。

基本用法

html 
<canvas
  id="myCanvas"
  width="400"
  height="200"
  style="border:1px solid #000;"
></canvas>

通过 JavaScript 获取画布上下文（context），开始绘制：

javascript 
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 获取2D绘图上下文

// 绘制一个红色矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 150, 100);

常用绘图方法

  • fillRect(x, y, width, height)：绘制填充矩形。
  • strokeRect(x, y, width, height)：绘制矩形边框。
  • clearRect(x, y, width, height)：清除画布指定区域。
  • beginPath() 和 closePath()：开始和关闭路径。
  • moveTo(x, y) 和 lineTo(x, y)：绘制路径线段。
  • arc(x, y, radius, startAngle, endAngle)：绘制圆弧或圆形。
  • fill() 和 stroke()：填充或描边路径。

应用场景

  • 图形绘制：画图、绘制形状。
  • 动画制作：游戏、交互动画。
  • 数据可视化：图表、仪表盘。
  • 图像处理：滤镜、特效。

注意事项

  • <canvas> 是位图画布，绘制内容不是 DOM 元素，不能直接被选中或操作。
  • 需要用 JavaScript 动态绘制内容。
  • 支持二维（2D）和三维（WebGL）绘图。

小结

<canvas> 提供了灵活强大的图形绘制能力，是 HTML5 中实现动态视觉效果和复杂交互的重要工具。

相关内容