编辑“︁HTML画布元素（Canvas）”︁

= HTML画布元素（Canvas） =

'''HTML画布元素'''（<code><canvas></code>）是HTML5引入的一个强大特性，允许开发者通过JavaScript动态绘制图形、动画和交互式内容。它提供了一种位图绘制API，适用于游戏开发、数据可视化、图像处理和动态UI设计等场景。

== 基本介绍 ==
<canvas> 元素是一个矩形区域，默认宽度为300像素，高度为150像素。它本身没有绘制能力，必须通过JavaScript进行操作。画布API提供了2D和WebGL（3D）两种渲染上下文，本文主要介绍2D上下文。

基本语法：
<syntaxhighlight lang="html">
<canvas id="myCanvas" width="500" height="300">
  您的浏览器不支持Canvas元素
</canvas>
</syntaxhighlight>

== 绘制上下文 ==
要开始绘制，首先需要获取渲染上下文：

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

== 基本绘制方法 ==
=== 绘制矩形 ===
画布提供了三种矩形绘制方法：
* <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(10, 10, 100, 80);

ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.strokeRect(50, 30, 120, 60);

ctx.clearRect(70, 50, 40, 20);
</syntaxhighlight>

输出效果：
<mermaid>
graph LR
    A[蓝色填充矩形] --> B[红色边框矩形]
    B --> C[中间清除区域]
</mermaid>

=== 绘制路径 ===
路径由一系列点组成，可用于绘制复杂形状：
<syntaxhighlight lang="javascript">
ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.lineTo(150, 50);
ctx.lineTo(100, 150);
ctx.closePath(); // 闭合路径
ctx.fillStyle = 'green';
ctx.fill();
</syntaxhighlight>

== 绘制文本 ==
画布支持两种文本绘制方法：
* <code>fillText(text, x, y)</code> - 填充文本
* <code>strokeText(text, x, y)</code> - 描边文本

可以设置字体、对齐方式等属性：
<syntaxhighlight lang="javascript">
ctx.font = '30px Arial';
ctx.fillStyle = 'purple';
ctx.textAlign = 'center';
ctx.fillText('Hello Canvas', canvas.width/2, 50);
</syntaxhighlight>

== 图像处理 ==
可以在画布上绘制图像：
<syntaxhighlight lang="javascript">
const img = new Image();
img.src = 'example.png';
img.onload = function() {
  ctx.drawImage(img, 10, 10, 100, 100);
};
</syntaxhighlight>

== 变换与动画 ==
画布支持多种变换操作：
* <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, 50, 50, 50);
  x += 1;
  if (x < canvas.width) {
    requestAnimationFrame(animate);
  }
}
animate();
</syntaxhighlight>

== 高级特性 ==
=== 渐变与图案 ===
可以创建线性渐变和径向渐变：
<syntaxhighlight lang="javascript">
// 线性渐变
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</syntaxhighlight>

=== 阴影效果 ===
<syntaxhighlight lang="javascript">
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(50, 50, 100, 100);
</syntaxhighlight>

=== 合成操作 ===
通过<code>globalCompositeOperation</code>可以控制图形合成方式：
<syntaxhighlight lang="javascript">
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 100, 100);
</syntaxhighlight>

== 实际应用案例 ==
1. '''游戏开发'''：2D游戏引擎如Phaser基于Canvas实现
2. '''数据可视化'''：图表库如Chart.js使用Canvas绘制
3. '''图像编辑器'''：在线图片处理工具的核心技术
4. '''交互式UI'''：特殊效果和动态界面元素

== 性能优化建议 ==
* 避免频繁的canvas状态改变
* 对复杂图形使用离屏canvas
* 合理使用<code>requestAnimationFrame</code>
* 减少不必要的重绘区域

== 数学基础 ==
Canvas绘图涉及的基本数学概念：
* 坐标系：左上角为原点(0,0)，x向右增加，y向下增加
* 角度：使用弧度制，<math>2\pi</math>弧度=360度
* 变换矩阵：<math>\begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix}</math>

== 浏览器兼容性 ==
现代浏览器都支持Canvas，但需要注意：
* IE9+支持基本功能
* 移动设备性能可能有限
* WebGL支持情况不同

== 学习资源 ==
* MDN Canvas文档
* HTML5 Canvas Cookbook
* Canvas API规范

通过掌握Canvas，开发者可以创建丰富的图形应用，突破传统HTML的限制，实现更具表现力的Web内容。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML高级特性]]