HTML5Canvas绘图基础教程

大家好，今天本人给大家带来文章《HTML5 Canvas绘图教程：绘制基本图形方法》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

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绘图的核心机制。

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

解决方案

要开始在Canvas上绘制，首先得在HTML里放一个标签，给它一个ID方便JavaScript抓取。

<canvas id="myCanvas" width="600"    style="max-width:100%" 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.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）就派上用场了。

自定义路径的基本流程：

1. ctx.beginPath(): 必须先调用这个方法，表示开始一个新的路径。如果没有调用，所有的绘图指令都会连接到上一个路径上，或者直接在默认路径上操作，这往往不是我们想要的。
2. ctx.moveTo(x, y): 将画笔移动到指定坐标(x, y)，但不会画线。这是路径的起点。
3. ctx.lineTo(x, y): 从当前点画一条直线到指定坐标(x, y)。
4. ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise): 绘制圆弧。
5. ctx.closePath(): 可选。将当前点与路径的起点连接起来，形成一个闭合图形。
6. ctx.stroke(): 描边路径。
7. 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游戏或数据可视化项目时，就踩过不少坑，总结了一些实用的优化技巧。

1. 最小化状态改变（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);

2. 使用requestAnimationFrame进行动画 这是Web动画的最佳实践。它告诉浏览器你希望执行一个动画，浏览器会在下一次重绘之前调用你提供的回调函数。这样可以确保动画帧率与浏览器刷新率同步，避免不必要的重绘，减少CPU和GPU的负担，也能防止在后台标签页运行时消耗资源。

   • 避免： setInterval或setTimeout。它们无法保证与浏览器同步，可能导致掉帧或过度渲染。

3. 避免在循环中创建对象 在动画循环或频繁调用的函数中，避免创建新的对象（如new Image()、new Path2D()）。对象的创建和垃圾回收都会带来性能开销。

   • 策略： 提前创建并复用对象。例如，图片加载一次即可，然后在需要时多次绘制。

4. 利用离屏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);

5. 只重绘需要更新的区域（Partial Redraws） 如果你的场景中只有一小部分内容发生变化，比如一个角色移动，没必要清除并重绘整个Canvas。

   • 策略： 只清除并重绘角色移动的旧位置和新位置。这需要更精细的区域管理。
   • 注意： 如果背景复杂且动态，部分重绘可能比全屏重绘更复杂，甚至更慢。权衡利弊。

6. 避免浮点数，尽量使用整数坐标 虽然Canvas支持浮点数坐标，但在某些浏览器和硬件上，使用浮点数可能会导致额外的抗锯齿计算，影响性能。如果可能，将坐标四舍五入到整数。

7. 合理使用ctx.save()和ctx.restore() 这两个方法用于保存和恢复当前的绘图状态。滥用或不当使用可能会引入开销，但正确使用可以简化代码并避免手动重置大量属性，间接提升效率和可维护性。

8. 考虑硬件加速 现代浏览器通常会对Canvas操作进行硬件加速。确保你的绘图操作能够充分利用GPU。避免过于复杂的像素操作，因为这可能会强制浏览器切换到软件渲染模式。

性能优化是一个持续迭代的过程。在开始时，先实现功能，当出现性能瓶颈时，再有针对性地进行优化。使用浏览器的开发者工具（如Chrome的Performance面板）可以帮助你分析瓶颈所在。

终于介绍完啦！小伙伴们，这篇关于《HTML5Canvas绘图基础教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！