JavaScript Canvas通过创建canvas元素并获取2D上下文实现绘图，支持矩形、路径、圆形等基本图形绘制，利用requestAnimationFrame实现高效动画循环，结合鼠标事件坐标转换实现交互响应，是网页动态图形与数据可视化的关键技术。
想在网页上实现动态图形、游戏或数据可视化，JavaScript Canvas 是绕不开的核心技术。它不依赖额外插件，直接在 HTML 页面绘制像素级图形。下面通过实战角度带你掌握关键用法和常见技巧。
创建Canvas并获取绘图上下文
使用 Canvas 第一步是创建 canvas 元素，并获取 2D 渲染上下文对象。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
注意设置 width 和 height 属性，而不是用 CSS 拉伸，否则会导致图像模糊。getContext('2d') 返回的 ctx 对象是所有绘图操作的入口。
绘制基本图形
Canvas 提供了绘制矩形、路径、圆形等基础形状的方法。
立即学习“Java免费学习笔记（深入）”；
- 矩形：fillRect 绘制实心矩形，strokeRect 绘制边框，clearRect 清除区域。
- 路径与线条：使用 beginPath() 开始路径，moveTo 定位起点，lineTo 画线，closePath 闭合路径，最后用 stroke 或 fill 渲染。
- 圆形/弧线：arc(x, y, radius, startAngle, endAngle, anticlockwise) 可画圆或扇形。
例如画一个红色圆：
ctx.beginPath();
ctx.arc(400, 300, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();
动画实现原理：requestAnimationFrame
让图形动起来的关键是循环重绘。requestAnimationFrame 比 setInterval 更高效，能适配屏幕刷新率。
基本结构如下：
本文档说的是unity3D中shader相关的一些知识；在shader编程中，有一些术语，有时候不明白的话容易被整懵圈，所以这里就简单提一下。Shading最开始指的在素描中给物体画明暗调子，在图形学中，其实就是给Mesh上色（Mesh就是一堆三角面片，包含顶点左边，法线坐标，uv坐标之类的），wiki中说的是根据物体相对于光线的角度及其距离光源距离改变物体颜色生成photorealistic效果的过程。我们所编写的处理shading的程序就叫做shader，中文叫着色器，程序的输入是颜色，纹理，坐标等等
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
// 更新图形位置或状态
ctx.fillRect(x, y, 40, 40);
x += dx; // 位置变化
requestAnimationFrame(animate);
}
animate();
清屏是关键步骤，否则会留下残影。控制 x、y 等变量实现移动、旋转或缩放效果。
交互与事件响应
Canvas 本身不记录图形，所以点击检测需要手动计算坐标。常用方法是监听鼠标事件并转换坐标。
例如判断点是否在矩形内：
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (x > 100 && x 100 && y
console.log('点击了目标区域');
}
});
复杂图形可用路径包围盒或数学公式判断是否命中。
性能优化建议
当绘制大量对象时，性能容易下降。几个实用技巧：
- 减少不必要的重绘，只更新变化区域。
- 避免频繁切换绘图样式（如 fillStyle），批量处理同类图形。
- 离屏 Canvas 预渲染静态内容，再合成到主画布。
- 控制动画帧率，必要时用 if (frame % 3 === 0) 降低更新频率。
基本上就这些。掌握绘图、动画循环和交互处理，就能构建出丰富的视觉应用。多练习绘制图表、粒子系统或小游戏，技能会快速提升。
