编辑“︁JavaScript Canvas基础”︁（章节）

= JavaScript Canvas基础 =

'''JavaScript Canvas基础'''是使用HTML5的<code><canvas></code>元素进行2D图形绘制的核心技术，它是实现数据可视化、游戏开发、动态UI等功能的底层基础。本章将逐步介绍Canvas的基本用法、绘图API及实际应用场景。

== 简介 ==
<code><canvas></code>是HTML5提供的绘图区域，通过JavaScript脚本可以动态绘制图形、图表、图像或动画。它不包含内置的绘图能力，而是通过'''CanvasRenderingContext2D''' API提供路径、形状、文本、图像操作等方法。

== 基本用法 ==
=== 创建Canvas元素 ===
首先需要在HTML中定义一个<code><canvas></code>元素，并设置其宽度和高度：
<syntaxhighlight lang="html">
<canvas id="myCanvas" width="400" height="300"></canvas>
</syntaxhighlight>

=== 获取绘图上下文 ===
通过JavaScript获取2D渲染上下文：
<syntaxhighlight lang="javascript">
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
</syntaxhighlight>

== 绘制基础图形 ==
=== 矩形 ===
Canvas提供三种矩形绘制方法：
* <code>fillRect(x, y, width, height)</code>：填充矩形
* <code>strokeRect(x, y, width, height)</code>：描边矩形
* <code>clearRect(x, y, width, height)</code>：清除矩形区域

示例：
<syntaxhighlight lang="javascript">
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 80);

ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.strokeRect(200, 50, 100, 80);
</syntaxhighlight>

输出效果：
* 蓝色填充矩形（位置：50,50；尺寸：100×80）
* 红色边框矩形（位置：200,50；尺寸：100×80）

=== 路径 ===
路径用于绘制复杂形状，基本步骤：
1. <code>beginPath()</code>：开始新路径
2. 绘制命令（如<code>moveTo</code>, <code>lineTo</code>）
3. <code>closePath()</code>（可选）
4. <code>stroke()</code>或<code>fill()</code>

示例（绘制三角形）：
<syntaxhighlight lang="javascript">
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(200, 100);
ctx.closePath();
ctx.stroke();
</syntaxhighlight>

== 样式与颜色 ==
=== 颜色设置 ===
* <code>fillStyle</code>：填充颜色
* <code>strokeStyle</code>：描边颜色
支持格式：
* 颜色名称（<code>'red'</code>）
* 十六进制（<code>'#FF0000'</code>）
* RGB/RGBA（<code>'rgb(255,0,0)'</code>）

=== 线型 ===
* <code>lineWidth</code>：线宽（像素）
* <code>lineCap</code>：线端样式（<code>butt</code>, <code>round</code>, <code>square</code>）
* <code>lineJoin</code>：转角样式（<code>miter</code>, <code>round</code>, <code>bevel</code>）

== 文本绘制 ==
使用<code>fillText(text, x, y)</code>和<code>strokeText(text, x, y)</code>方法：
<syntaxhighlight lang="javascript">
ctx.font = '20px Arial';
ctx.fillStyle = 'green';
ctx.fillText('Hello Canvas!', 50, 150);
</syntaxhighlight>

== 图像操作 ==
通过<code>drawImage()</code>绘制图像：
<syntaxhighlight lang="javascript">
const img = new Image();
img.src = 'example.png';
img.onload = function() {
    ctx.drawImage(img, 0, 0, 200, 100);
};
</syntaxhighlight>

== 坐标系与变换 ==
Canvas使用二维笛卡尔坐标系，原点(0,0)在左上角。可通过以下方法变换坐标系：
* <code>translate(x, y)</code>：平移
* <code>rotate(angle)</code>：旋转
* <code>scale(x, y)</code>：缩放

== 动画基础 ==
使用<code>requestAnimationFrame</code>实现动画：
<syntaxhighlight lang="javascript">
let x = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 100, 50, 50);
    x += 2;
    requestAnimationFrame(animate);
}
animate();
</syntaxhighlight>

== 实际应用案例 ==
=== 数据可视化（简单柱状图） ===
<mermaid>
barChart
    title 月度销售额
    xAxis 月份
    yAxis 销售额（万）
    bar "一月" : 120
    bar "二月" : 150
    bar "三月" : 180
</mermaid>

实现代码：
<syntaxhighlight lang="javascript">
const data = [120, 150, 180];
const labels = ['一月', '二月', '三月'];

ctx.fillStyle = 'steelblue';
data.forEach((value, index) => {
    const barWidth = 60;
    const barHeight = value;
    const x = 100 + index * 100;
    const y = canvas.height - barHeight;
    
    ctx.fillRect(x, y, barWidth, barHeight);
    ctx.fillStyle = 'black';
    ctx.fillText(labels[index], x, canvas.height - 10);
});
</syntaxhighlight>

== 性能优化建议 ==
1. 避免频繁的Canvas状态改变（如样式切换）
2. 对复杂图形使用离屏Canvas
3. 使用<code>requestAnimationFrame</code>而非<code>setInterval</code>
4. 清除绘制区域时优先使用<code>clearRect</code>

== 数学公式应用 ==
绘制正弦波示例：
<math>y = A \cdot \sin(2 \pi f t + \phi)</math>
<syntaxhighlight lang="javascript">
ctx.beginPath();
for (let x = 0; x < canvas.width; x++) {
    const y = 100 + 50 * Math.sin(x * 0.05);
    ctx.lineTo(x, y);
}
ctx.stroke();
</syntaxhighlight>

== 总结 ==
Canvas提供了强大的2D绘图能力，适合：
* 数据可视化
* 游戏开发
* 图像处理
* 交互式UI

掌握Canvas基础后，可进一步学习：
* 高级路径操作（贝塞尔曲线）
* 像素级操作（ImageData）
* WebGL集成（三维图形）

通过实践项目（如制作图表、简单游戏）能有效巩固Canvas技能。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript数据可视化]]