Canvas知识框架-CSDN博客

本文链接：https://blog.csdn.net/weixin_45119097/article/details/147965800

核心概念
- Canvas是位图绘图区域，通过JavaScript（或Python等）动态绘制图形。
- 坐标系：左上角为原点 (0, 0)，x向右递增，y向下递增。
- 绘图流程：
```
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d'); // 获取2D渲染上下文
```
基本绘图指令
- 路径绘制：
  - beginPath() 开始路径
  - moveTo(x, y) 移动画笔
  - lineTo(x, y) 画线
  - arc(x, y, radius, startAngle, endAngle) 画弧
  - closePath() 闭合路径
  - stroke() 描边 / fill() 填充
- 矩形：
  - rect(x, y, width, height)
  - strokeRect() / fillRect()
样式控制
- 颜色：strokeStyle, fillStyle（支持HEX、RGB、RGBA）
- 线宽：lineWidth
- 线型：lineCap（端点样式）, lineJoin（拐角样式）
- 阴影：shadowColor, shadowBlur, shadowOffsetX/Y

变换与状态管理
- 平移：translate(x, y)
- 旋转：rotate(angle)
- 缩放：scale(sx, sy)
- 状态栈：save() 和 restore() 保存/恢复绘图状态（样式、变换等）。
图像操作
- 绘制图像：drawImage(image, x, y, width, height)
- 图像裁剪：drawImage 的9参数版本。
- 像素操作：getImageData() / putImageData() 直接操作像素数据。
文本绘制
- fillText(text, x, y) / strokeText(text, x, y)
- 字体样式：font（如 '20px Arial'）
- 对齐：textAlign, textBaseline
复合与裁剪
- 全局透明度：globalAlpha
- 混合模式：globalCompositeOperation（如 'source-over', 'lighter'）
- 裁剪路径：clip()

动画基础
- 使用 requestAnimationFrame 实现帧循环。
- 清除画布：clearRect(0, 0, width, height)。
- 示例：移动小球动画。

事件交互

监听鼠标/触摸事件：

canvas.addEventListener('click', (e) => {
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;
  // 绘制交互图形
});

调试技巧
- 使用 console.log 输出绘图状态。
- 检查Canvas尺寸是否被CSS拉伸（需显式设置width/height属性）。
开发工具
- Chrome开发者工具：检查Canvas元素、捕获帧。

Tkinter Canvas
- 基础绘图：create_line(), create_rectangle(), create_oval()。
- 交互：bind() 事件绑定（如 <Button-1>）。
- 动画：通过 after() 定时更新。

通过掌握以上框架，你可以逐步深入Canvas的各类应用场景，结合项目需求灵活运用绘图技术。