# Canvas 绘图基础

## 什么是 Canvas？

`Canvas` 是 HTML5 提供的一个绘图 API，它允许开发者使用 `JavaScript` 在网页上绘制图形、动画和游戏。与传统的 DOM 操作不同，`Canvas` 提供的是一个像素级的绘图环境，特别适合需要高性能图形渲染的场景。

### 基本特性
- **即时渲染**：所有绘图操作都会立即反映在画布上
- **无状态**：`Canvas` 不会记住绘制的内容，需要开发者手动管理
- **高性能**：适合复杂动画和游戏开发
- **跨平台**：在所有现代浏览器中都得到良好支持

## 开始使用 Canvas

### 1. 创建 Canvas 元素

在 `HTML` 文件中添加 [`canvas`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.canvas.md) 标签：

```html
<canvas id="myCanvas" width="500" height="300">
  您的浏览器不支持 Canvas，请升级或更换浏览器
</canvas>
```

### 2. 获取绘图上下文

在 `JavaScript` 中获取绘图上下文：

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

## 基础绘图操作

### 绘制矩形

`Canvas` 提供了三种绘制矩形的方法：

```javascript
// 填充矩形
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(10, 10, 100, 50); // (x, y, width, height)

// 描边矩形
ctx.strokeStyle = 'blue'; // 设置描边颜色
ctx.lineWidth = 3; // 设置线宽
ctx.strokeRect(150, 10, 100, 50);

// 清除矩形区域
ctx.clearRect(20, 20, 80, 30); // 清除指定区域
```

### 绘制路径

路径是 `Canvas` 中绘制复杂图形的基础：

```javascript
// 开始路径
ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.lineTo(150, 50); // 第一条线
ctx.lineTo(100, 150); // 第二条线
ctx.closePath(); // 闭合路径

// 描边或填充
ctx.strokeStyle = 'green';
ctx.stroke();

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
```

### 绘制圆形

使用 `arc` 方法绘制圆形或圆弧：

```javascript
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2); // (x, y, radius, startAngle, endAngle)
ctx.fillStyle = 'purple';
ctx.fill();
```

## 高级绘图技巧

### 使用渐变

`Canvas` 支持线性渐变和径向渐变：

```javascript
// 线性渐变
const linearGradient = ctx.createLinearGradient(0, 0, 200, 0);
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(1, 'yellow');
ctx.fillStyle = linearGradient;
ctx.fillRect(10, 200, 200, 50);

// 径向渐变
const radialGradient = ctx.createRadialGradient(350, 250, 10, 350, 250, 50);
radialGradient.addColorStop(0, 'white');
radialGradient.addColorStop(1, 'blue');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 200, 100, 100);
```

### 绘制文本

`Canvas` 可以绘制文本并控制其样式：

```javascript
ctx.font = '30px Arial'; // 设置字体
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 50, 300); // 填充文本
ctx.strokeText('Hello Canvas', 50, 350); // 描边文本
```

### 图像操作

Canvas 可以绘制和操作图像：

```javascript
const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  // 绘制图像
  ctx.drawImage(img, 10, 10);
  
  // 缩放图像
  ctx.drawImage(img, 10, 10, 100, 100);
  
  // 裁剪并绘制图像
  ctx.drawImage(img, 50, 50, 100, 100, 10, 10, 100, 100);
};
```

## 动画实现

`Canvas` 动画通常使用 `requestAnimationFrame` 实现：

```javascript
let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.fillRect(x, 50, 50, 50); // 绘制新位置
  x += 2;
  if (x < canvas.width) {
    requestAnimationFrame(animate); // 继续动画
  }
}
animate();
```

## 性能优化技巧

1. **分层渲染**：使用多个 [`canvas`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.canvas.md) 元素分层绘制
2. **离屏渲染**：先在内存中绘制，再复制到显示 [`canvas`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.canvas.md)
3. **减少绘制区域**：只重绘变化的部分
4. **避免浮点坐标**：使用整数坐标减少抗锯齿计算

## 实际应用案例

1. **数据可视化**：绘制图表和图形
2. **游戏开发**：2D 游戏引擎
3. **图像处理**：滤镜和特效
4. **交互设计**：自定义 UI 元素
5. **教育工具**：数学函数绘图

## 学习资源

1. [MDN Canvas 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)
2. [编程伙伴 Canvas 文档](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.canvas.md?spm=a2c6h.13046898.publish-article.13.42ee6ffayAyyI3&file=EX.canvas.md)



Canvas 是 HTML5 提供的一个绘图 API，它允许开发者使用 JavaScript 在网页上绘制图形、动画和游戏。与传统的 DOM 操作不同，Canvas 提供的是一个像素级的绘图环境，特别适合需要高性能图形渲染的场景。

Canvas 绘图基础

前端

编程语言

HTML5 Canvas绘图API教程：学习基础图形绘制、文本渲染、图像操作和动画实现。掌握矩形、路径、圆形绘制技巧，了解渐变填充、性能优化方法，适用于数据可视化、游戏开发等场景。从创建画布到高级动画，全面讲解Canvas核心功能。

数据可视化

图像处理

游戏引擎

游戏开发

HTML5

腾讯云大数据特惠专场


11.11畅享AI算力 云启新增长

imageprocess

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

Canvas 绘图基础-腾讯云开发者社区-腾讯云

Canvas 绘图基础

Canvas 绘图基础

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐