HTML5Canvas怎么绘制图形_Canvas绘制基本图形教程-html教程-PHP中文网

HTML5 Canvas绘制核心在于通过JavaScript获取2D绘图上下文（context），它是绘图操作的入口和状态管理中心。首先在HTML中创建canvas元素并设置宽高，再用document.getElementById获取该元素，调用其getContext('2d')方法得到上下文对象ctx。所有图形绘制如矩形、圆形、路径、文本和图片均通过ctx提供的API完成。绘制矩形使用fillRect、strokeRect和clearRect；绘制路径需调用beginPath、moveTo、lineTo、arc等方法构建形状，再用fill或stroke渲染；文本通过font、fillText和strokeText设置样式与位置；图片则利用Image对象加载后通过drawImage绘制。自定义复杂路径依赖quadraticCurveTo和bezierCurveTo实现平滑曲线，控制点决定曲率。性能优化关键包括减少状态变更、批量同类型绘制、使用requestAnimationFrame驱动动画、避免循环中创建对象、采用离屏Canvas预渲染复杂内容、局部重绘而非全屏刷新，并尽量使用整数坐标以提升渲染效率。绘图上下文不仅是API容器，还管理颜色、线条、字体等状态，支持save/restore进行状态栈操作，是实现高效Canvas绘图的核心机制。

html5canvas怎么绘制图形_canvas绘制基本图形教程

HTML5 Canvas绘制图形的核心，在于通过JavaScript获取到一个2D绘图上下文（rendering context），然后调用这个上下文对象提供的一系列API方法，比如画矩形、画圆、画路径、写文字，甚至处理图片，来实现我们想要的视觉效果。它就像一块数字画布，我们用代码作笔，在上面自由挥洒。

解决方案

要开始在Canvas上绘制，首先得在HTML里放一个

<canvas>

登录后复制

标签，给它一个ID方便JavaScript抓取。

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #ccc;"></canvas>

登录后复制

接下来就是JavaScript的部分了。我们需要获取到这个Canvas元素，然后调用它的

getContext('2d')

登录后复制

方法来获取那个至关重要的2D绘图上下文。所有后续的绘图操作，都将通过这个上下文对象进行。

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

// 1. 绘制矩形
// ctx.fillRect(x, y, width, height) 填充矩形
ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 75); // 从(50,50)开始，宽100，高75的填充矩形

// ctx.strokeRect(x, y, width, height) 绘制矩形边框
ctx.strokeStyle = 'red'; // 设置边框颜色
ctx.lineWidth = 3; // 设置线宽
ctx.strokeRect(180, 50, 100, 75); // 从(180,50)开始，宽100，高75的边框矩形

// ctx.clearRect(x, y, width, height) 清除矩形区域
// ctx.clearRect(60, 60, 80, 55); // 清除之前蓝色矩形的一部分

// 2. 绘制路径（线段、多边形、圆形）
// 绘制路径的步骤通常是：开始路径 -> 移动到起点 -> 绘制线段/曲线 -> 闭合路径（可选）-> 填充或描边

// 绘制一个三角形
ctx.beginPath(); // 开始一个新的路径
ctx.moveTo(300, 50); // 将画笔移动到(300,50)
ctx.lineTo(350, 100); // 从当前点画线到(350,100)
ctx.lineTo(250, 100); // 从当前点画线到(250,100)
ctx.closePath(); // 闭合路径，将当前点与起点连接起来
ctx.fillStyle = 'green';
ctx.fill(); // 填充路径
ctx.strokeStyle = 'black';
ctx.stroke(); // 描边路径

// 绘制一个圆
ctx.beginPath();
// ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
// x, y: 圆心坐标
// radius: 半径
// startAngle, endAngle: 起始和结束角度（弧度制），0是3点钟方向
// anticlockwise: 逆时针绘制（true）还是顺时针（false），默认为false
ctx.arc(450, 80, 40, 0, Math.PI * 2, false); // 绘制一个完整的圆
ctx.fillStyle = 'purple';
ctx.fill();
ctx.strokeStyle = 'darkgray';
ctx.lineWidth = 2;
ctx.stroke();

// 3. 绘制文本
ctx.font = '24px Arial'; // 设置字体样式
ctx.fillStyle = 'darkorange';
ctx.fillText('Hello Canvas!', 50, 200); // 填充文本，从(50,200)开始

ctx.strokeStyle = 'navy';
ctx.lineWidth = 1;
ctx.strokeText('Web Graphics', 50, 240); // 描边文本

// 4. 绘制图片
// 实际应用中，通常会先加载图片，等图片加载完成后再绘制
const img = new Image();
img.src = 'https://via.placeholder.com/100x100?text=Image'; // 示例图片
img.onload = () => {
    // ctx.drawImage(image, dx, dy)
    // ctx.drawImage(image, dx, dy, dWidth, dHeight)
    // ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    ctx.drawImage(img, 350, 180); // 在(350,180)绘制图片
    ctx.drawImage(img, 480, 180, 80, 80); // 在(480,180)绘制图片，并缩放至80x80
};

登录后复制

这些就是Canvas绘制基本图形的一些核心方法。关键在于理解

ctx

登录后复制

这个上下文对象，它提供了我们所需的所有“画笔”和“颜料”。

立即学习“前端免费学习笔记（深入）”；

Canvas绘图上下文（Context）是什么？为什么它如此重要？

如果你问我Canvas绘图最关键的起点是什么，我肯定会说是那个“绘图上下文”。简单来说，当我们拿到一个

<canvas>

登录后复制

元素后，调用

canvas.getContext('2d')

登录后复制

方法，返回的就是这个2D绘图上下文对象。它就像一个拥有各种绘图工具的工具箱，或者更形象地说，它是你和Canvas之间沟通的桥梁，所有你想要在画布上做的操作——画线、填色、写字、变形——都必须通过它来完成。

为什么它如此重要呢？

首先，它是API的入口。Canvas本身只是一个DOM元素，它不直接提供绘图功能。是这个

context

登录后复制

对象封装了所有实际的绘图方法（

fillRect

登录后复制

、

arc

登录后复制

、

lineTo

登录后复制

等等）和属性（

fillStyle

登录后复制

、

strokeStyle

登录后复制

、

lineWidth

登录后复制

、

font

登录后复制

等等）。没有它，你根本无从下手。

其次，它管理绘图状态。想象一下你画画的时候，需要选择不同的画笔粗细、颜色、填充模式。在Canvas里，这些都是绘图上下文的状态。比如你设置了

ctx.fillStyle = 'red'

登录后复制

，那么接下来所有

fill()

登录后复制

操作都会是红色，直到你再次改变

fillStyle

登录后复制

。它保持着当前的绘图设置，让你能够连续地进行操作。而且，它还提供了

save()

登录后复制

和

restore()

登录后复制

方法，让你能够保存和恢复当前的绘图状态，这在绘制复杂图形或者需要临时改变样式时非常有用，避免了手动重置一堆属性的麻烦。

再者，它提供了不同的渲染模式。虽然我们最常用的是

'2d'

登录后复制

上下文，但Canvas也支持

'webgl'

登录后复制

（或

'webgl2'

登录后复制

）上下文，用于3D图形渲染。虽然API完全不同，但获取上下文的机制是一样的。这表明

getContext()

登录后复制

是一个通用的接口，根据参数的不同，能提供不同维度的图形渲染能力。

所以，理解绘图上下文，就理解了Canvas绘图的核心机制。它是你手中的那支魔法笔，决定了你能在画布上画出怎样的世界。

如何用Canvas绘制复杂的自定义路径？贝塞尔曲线和二次曲线怎么用？

绘制自定义路径是Canvas强大功能之一，它允许我们画出任何我们想象的形状，而不仅仅是预设的矩形或圆形。这通常涉及到一系列的

beginPath()

登录后复制

、

moveTo()

登录后复制

、

lineTo()

登录后复制

、

arc()

登录后复制

等方法。但当我们需要平滑的、曲线的形状时，贝塞尔曲线（Bezier Curve）和二次曲线（Quadratic Curve）就派上用场了。

自定义路径的基本流程：

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

```
ctx.beginPath()
```
登录后复制
: 必须先调用这个方法，表示开始一个新的路径。如果没有调用，所有的绘图指令都会连接到上一个路径上，或者直接在默认路径上操作，这往往不是我们想要的。
```
ctx.moveTo(x, y)
```
登录后复制
: 将画笔移动到指定坐标
```
(x, y)
```
登录后复制
，但不会画线。这是路径的起点。
```
ctx.lineTo(x, y)
```
登录后复制
: 从当前点画一条直线到指定坐标
```
(x, y)
```
登录后复制
。

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

登录后复制

: 绘制圆弧。

```
ctx.closePath()
```
登录后复制
: 可选。将当前点与路径的起点连接起来，形成一个闭合图形。
```
ctx.stroke()
```
登录后复制
: 描边路径。
```
ctx.fill()
```
登录后复制
: 填充路径。

贝塞尔曲线和二次曲线：

它们都是用来绘制平滑曲线的，主要区别在于控制点的数量和曲线的数学定义。

1. 二次贝塞尔曲线 (

quadraticCurveTo

登录后复制

)

二次贝塞尔曲线需要一个控制点和终点。它从当前点开始，经过控制点，最终到达终点。

```
ctx.quadraticCurveTo(cp1x, cp1y, x, y)
```
登录后复制
- ```
cp1x, cp1y
```
  登录后复制
  : 控制点的坐标。这个点不在线上，但它“拉扯”着曲线，使其弯曲。
- ```
x, y
```
  登录后复制
  : 曲线的终点坐标。

// 绘制一个二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 300); // 曲线起点
ctx.quadraticCurveTo(150, 250, 250, 300); // 控制点(150,250)，终点(250,300)
ctx.strokeStyle = 'orange';
ctx.lineWidth = 2;
ctx.stroke();

// 绘制控制点和终点，方便理解
ctx.fillStyle = 'red';
ctx.fillRect(150-2, 250-2, 4, 4); // 控制点
ctx.fillStyle = 'blue';
ctx.fillRect(250-2, 300-2, 4, 4); // 终点

登录后复制

2. 三次贝塞尔曲线 (

bezierCurveTo

登录后复制

)

三次贝塞尔曲线比二次曲线多一个控制点，因此可以实现更复杂的曲线形状。它从当前点开始，通过两个控制点，最终到达终点。

```
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
```
登录后复制
- ```
cp1x, cp1y
```
  登录后复制
  : 第一个控制点的坐标。
- ```
cp2x, cp2y
```
  登录后复制
  : 第二个控制点的坐标。
- ```
x, y
```
  登录后复制
  : 曲线的终点坐标。

// 绘制一个三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(300, 300); // 曲线起点
ctx.bezierCurveTo(350, 250, 450, 350, 500, 300); // 控制点1(350,250)，控制点2(450,350)，终点(500,300)
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.stroke();

// 绘制控制点和终点
ctx.fillStyle = 'red';
ctx.fillRect(350-2, 250-2, 4, 4); // 控制点1
ctx.fillRect(450-2, 350-2, 4, 4); // 控制点2
ctx.fillStyle = 'blue';
ctx.fillRect(500-2, 300-2, 4, 4); // 终点

登录后复制

理解贝塞尔曲线的关键在于，控制点并不在曲线上，它们只是影响曲线的“拉力”方向和强度。通过调整这些控制点的坐标，你可以精确地塑造出各种平滑的曲线形状，这在绘制图表、游戏路径、或者任何需要自由曲线的场景中都非常有用。实践是最好的老师，多尝试调整控制点的位置，你会很快掌握它们的奥秘。

Canvas图形渲染性能优化有哪些技巧？

在Canvas上绘制图形，尤其是当动画或复杂交互涉及到大量图形操作时，性能问题会变得很突出。如果处理不当，页面可能会卡顿，用户体验直线下降。我个人在处理一些Canvas游戏或数据可视化项目时，就踩过不少坑，总结了一些实用的优化技巧。

最小化状态改变（Minimize State Changes） 每次你改变
```
fillStyle
```
登录后复制
、
```
strokeStyle
```
登录后复制
、
```
lineWidth
```
登录后复制
、
```
font
```
登录后复制
等绘图上下文的属性时，浏览器都需要做一些额外的工作。如果你的代码频繁地切换这些状态，性能开销会累积。
- 策略： 尽量将相同样式的绘制操作放在一起。比如，先画完所有红色的矩形，再画所有蓝色的圆。
- 示例：
```
// 差的写法：频繁切换颜色
ctx.fillStyle = 'red';
ctx.fillRect(0,0,10,10);
ctx.fillStyle = 'blue';
ctx.fillRect(20,0,10,10);
ctx.fillStyle = 'red';
ctx.fillRect(40,0,10,10);

// 好的写法：批量处理
ctx.fillStyle = 'red';
ctx.fillRect(0,0,10,10);
ctx.fillRect(40,0,10,10);
ctx.fillStyle = 'blue';
ctx.fillRect(20,0,10,10);
```
  登录后复制
使用
```
requestAnimationFrame
```
登录后复制
进行动画 这是Web动画的最佳实践。它告诉浏览器你希望执行一个动画，浏览器会在下一次重绘之前调用你提供的回调函数。这样可以确保动画帧率与浏览器刷新率同步，避免不必要的重绘，减少CPU和GPU的负担，也能防止在后台标签页运行时消耗资源。
- 避免：
```
setInterval
```
  登录后复制
  或
```
setTimeout
```
  登录后复制
  。它们无法保证与浏览器同步，可能导致掉帧或过度渲染。
避免在循环中创建对象 在动画循环或频繁调用的函数中，避免创建新的对象（如
```
new Image()
```
登录后复制
、
```
new Path2D()
```
登录后复制
）。对象的创建和垃圾回收都会带来性能开销。
- 策略： 提前创建并复用对象。例如，图片加载一次即可，然后在需要时多次绘制。
利用离屏Canvas（Offscreen Canvas） 如果有一些复杂的图形或图像操作（比如模糊、滤镜、预渲染复杂背景），并且这些操作的结果不需要立即显示，可以先在一个“看不见”的Canvas（离屏Canvas）上进行绘制。完成后，再将这个离屏Canvas的内容整体绘制到主Canvas上。这可以减少主Canvas的重绘次数，并且将耗时操作从主线程中分离出来（配合Web Worker）。
- 示例：
```
const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
const offscreenCtx = offscreenCanvas.getContext('2d');

// 在离屏Canvas上绘制复杂内容
offscreenCtx.fillStyle = 'gray';
offscreenCtx.fillRect(0, 0, 100, 100);
// ...更多复杂绘制

// 将离屏Canvas内容绘制到主Canvas
ctx.drawImage(offscreenCanvas, 0, 0);
```
  登录后复制
只重绘需要更新的区域（Partial Redraws） 如果你的场景中只有一小部分内容发生变化，比如一个角色移动，没必要清除并重绘整个Canvas。
- 策略： 只清除并重绘角色移动的旧位置和新位置。这需要更精细的区域管理。
- 注意： 如果背景复杂且动态，部分重绘可能比全屏重绘更复杂，甚至更慢。权衡利弊。
避免浮点数，尽量使用整数坐标 虽然Canvas支持浮点数坐标，但在某些浏览器和硬件上，使用浮点数可能会导致额外的抗锯齿计算，影响性能。如果可能，将坐标四舍五入到整数。
合理使用
```
ctx.save()
```
登录后复制
和
ctx.restore()
登录后复制
这两个方法用于保存和恢复当前的绘图状态。滥用或不当使用可能会引入开销，但正确使用可以简化代码并避免手动重置大量属性，间接提升效率和可维护性。
考虑硬件加速 现代浏览器通常会对Canvas操作进行硬件加速。确保你的绘图操作能够充分利用GPU。避免过于复杂的像素操作，因为这可能会强制浏览器切换到软件渲染模式。