TNotes.canvas

Appearance

to top

0001. 认识 canvas 标签 ​

1. 📝 简介 ​

  • 本节介绍了 canvas 的一些基本特性。通过一个简单的小示例，绘制一个矩形，来初步了解一下 canvas 的基本使用。
  • 介绍了 canvas 技术的一些应用场景。简单了解一下 canvas 这玩意儿能用来做些什么东西。
  • 了解 Image 和 Graphic 之间的区别
  • 了解 svg 和 canvas 之间的区别

2. 📒 canvas 概述 ​

<canvas> 是 HTML5 中引入的一个元素，它允许你在网页上绘制图形，这些图形可以是 2D 或 3D （使用 WebGL）。<canvas> 元素本身只是一个容器，实际的绘制需要使用 JavaScript 来完成。

3. 📒 canvas 基本使用 ​

html
<!-- ./1.html -->
<body>
  <canvas id="myCanvas" width="200" height="100"></canvas>

  <script>
    // 获取上述创建好的 canvas 标签
    const canvas = document.getElementById('myCanvas')

    // 获取 canvas 这玩意儿的上下文
    // 可以理解为获取画笔，需要先有画笔才能绘图不是。
    const ctx = canvas.getContext('2d')

    ctx.fillStyle = 'red'
    ctx.fillRect(10, 10, 50, 50)
  </script>
</body>

1.html 的渲染结果如下：

要在网页上使用 <canvas>，你首先需要在 HTML 中定义一个 <canvas> 标签，并为其指定一个 id：

canvas 标签

html
<canvas id="myCanvas" width="200" height="100"></canvas>

然后在 JavaScript 中获取这个 Canvas 元素，并通过它的绘图上下文进行绘制：

使用 js 获取 canvas 标签

javascript
// 获取上述创建好的 canvas 标签
const canvas = document.getElementById('myCanvas')

// 获取 canvas 这玩意儿的上下文
// 可以理解为获取画笔，需要先有画笔才能绘图不是。
const ctx = canvas.getContext('2d')

getContext('2d') 方法是用来获取渲染上下文和其绘图功能的。你可以通过这个上下文来绘制简单的图形，比如矩形、圆形，或者更复杂的路径。

以下是一个简单的示例，演示如何在 Canvas 上绘制一个红色矩形：

javascript
ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 50, 50)

这段代码设置了填充色为红色，并绘制了一个位于画布上 (10,10) 位置，宽 50 像素，高 50 像素的矩形。

从最终渲染的结果来看，你会发现页面上确实绘制出了一个红色的矩形。但是打开开发者调试工具后，你会发现并没有像 <svg> 那样，出现一个 <rect> 元素。这也是 canvas 和 svg 的一个重大差一点之一：

  • svg 是基于 xml 的，它类似与 html，是有 DOM 结构的。
  • canvas 的绘图这是基于 JavaScript 来控制，我们定义的 canvas 标签，仅仅是提供一个画布，绘制的内容是不存在对应的 DOM 节点的。

4. 📒 canvas 基本特性 ​

  • 像素基础：Canvas 是基于 像素 的，你可以通过 JavaScript 控制每一个像素。
  • 动态图形：Canvas 非常适合 动态 生成的图形，如 游戏、图形处理 和其他需要大量 动态视觉效果 的应用。
  • 无 DOM 结构：Canvas 内部 的图形 不是 DOM 元素，因此它们不是 HTML 的一部分，不能直接被 CSS 样式化或用 CSS 控制。
  • 动画问题：由于 Canvas 本身不提供构建动画的直接支持，动画的创建需要通过 JavaScript 定时调用绘图命令来实现。例如，使用 **requestAnimationFrame** 来持续更新 Canvas 上的图形以创建动画效果。

<canvas> 是一个功能强大的工具，适合需要绘制大量计算生成图形的应用。

由于其依赖 JavaScript 进行绘图，这为开发者提供了极大的灵活性，但同时也意味着它可能不如 SVG 那样适合 搜索引擎优化 或简单的图形显示。

5. 📒 canvas 应用场景 ​

<canvas> 元素主要用来解决需要动态、复杂渲染以及高度可交互的图形场景的问题。

<canvas> 的主要优势在于处理复杂的图形操作和实现高级动画与交互。这使得它在需要高度图形交互和动态内容更新的应用中非常有用，尤其是在游戏开发、图形编辑和数据可视化等领域。

5.1. 游戏开发 ​

Canvas 非常适合用于开发 2D 游戏。它可以处理大量的图形和动画效果，而且由于基于像素，开发者可以精细控制图像和动作，进行复杂的视觉效果渲染和帧控制。

4399 中的小游戏，大多也都是通过 canvas 来制作的。

5.2. 图形处理 ​

Canvas 提供了强大的图像处理能力，例如图像编辑功能（如旋转、缩放、裁剪等）、颜色效果和图像合成。这些功能使其成为在线图形编辑工具的好选择。

5.3. 数据可视化 ​

虽然 SVG 在很多数据可视化场景中也很流行，但对于需要大量动态交互和大数据量渲染的复杂数据可视化，Canvas 是更好的选择。例如，实时的数据更新、动态效果和图表，以及交互式的图形操作。

比如 echarts demos

这里补充一嘴，实际上 echarts 图表，支持两种渲染模式 svg、canvas。默认情况下使用的是 canvas 来渲染。这样说明了一点，很多图形 svg、canvas 都可以绘制，并不是说某种图形就一定得使用某种技术来实现。

5.4. 实时视频处理 ​

Canvas 可以用来处理和修改视频内容，如视频特效、实时视频渲染等。可以将视频帧捕捉到 Canvas 上，并使用其 API 来实现图像数据的即时处理。

5.5. 自定义绘图 ​

对于需要高度自定义的绘图应用，如绘画程序或设计工具，Canvas 提供了所需的灵活性，用户可以通过简单的鼠标交互来创建复杂的设计和图形。

5.6. 教育和模拟 ​

在教育软件中，尤其是需要动态展示和交互式学习的场景，如物理实验模拟、生物结构展示等，Canvas 提供了一种有效的实现方式。

6. 📒 对比 svg 和 canvas ​

文中提供了一张表格，记录了这俩玩意儿之间的一些差异。可以等学完了 svg、canvas 的内容之后再来回看这篇文档中提到的内容。

6.1. 对比表格 ​

SVGCanvas
2003 成为 w3c 标准html5 新标签
绘制矢量图绘制位图
放缩不会导致失真放缩会导致失真
对（图形）标签进行操作，方便，灵活对像素点进行操作，效果更细腻，不易操作
交互性强，容易实现动画动画逻辑实现复杂
存在一定的性能问题性能略高一些
适合绘制地图、图标……适合绘制图表，制作游戏……
不易绘制 3d 图形提供了绘制 3d 图形的 api

6.2. 对比 svg 和 canvas ​

在提到前端绘图时，首先会想到的两个技术就是 svg、canvas。但是它们是两个完全不同的技术，存在不少区别。

初学阶段，想要充分理解 svg、canvas 之间的区别并不容易。只能说对它们俩有个初步的认知，比如知道它们都能用来做些什么内容。想要充分理解它们之间的区别，最好把两个技术都过一边，从各个角度去比较两者之间的差异。

在写法上两者差异是比较大的：

  • svg 写的是 xml，写起来类似写 html，因此打开浏览器的调试工具，你可以看到一个 <svg> 元素，然后这个 <svg> 里边包含着一个个其它的 svg 子元素。
  • canvas 仅仅是提供一个画布，所有绘图的逻辑，都交给 js 去控制，因此在浏览器的调试工具中，你只能看到一个 <canvas> 标签。

想要了解 svg、canvas 都能做什么，一个不错的法子就是上网找案例，看看使用 svg、canvas 技术实现的成品。比如，快速了解一下它们能够实现什么效果。

svg 的 demos 可以看看 snapsvg demos

canvas 的 demos 可以看看 4399 小游戏。

4399 中的小游戏，大多也都是通过 canvas 来制作的。

再比如 echarts demos

这里补充一嘴，实际上 echarts 图表，支持两种渲染模式 svg、canvas。默认情况下使用的是 canvas 来渲染。这样说明了一点，很多图形 svg、canvas 都可以绘制，并不是说某种图形就一定得使用某种技术来实现。

7. 🤖 对比 svg 和 canvas ​

SVG（Scalable Vector Graphics）和 Canvas 是两种流行的图形处理技术，它们各有特点，并适用于不同的应用场景。以下是它们的主要对比：

7.1. 图形类型 ​

  • SVG：使用矢量图形，这意味着图形是通过数学方程式来描述的，可以无限缩放而不会失真。
  • Canvas：使用像素图形（位图），它是一个矩形像素的网格，放大过多时会出现像素化。

7.2. DOM 交互 ​

  • SVG：SVG 图形是作为DOM（文档对象模型）的一部分直接嵌入到HTML中，因此可以像HTML元素一样用CSS和JavaScript进行控制和操作。
  • Canvas：Canvas通过JavaScript在一个绘图表面上动态渲染图像，它本身不是DOM的一部分，不能直接被CSS控制，所有的元素都需要通过脚本处理。

7.3. 性能 ​

  • SVG：由于SVG文件是DOM的一部分，当SVG元素非常多或非常复杂时，它可能会降低页面的性能，因为每个元素都是DOM节点。
  • Canvas：通常在处理大量或复杂动画和游戏图形时性能更好，因为它直接在位图上进行渲染，不依赖DOM结构。

7.4. 可访问性和SEO ​

  • SVG：由于SVG元素是DOM的一部分，它们可以被搜索引擎索引，也支持文本标签和描述，增加了可访问性。
  • Canvas：Canvas内的元素不可搜索，对搜索引擎优化（SEO）和屏幕阅读器的支持较差。

7.5. 应用场景 ​

  • SVG：非常适合需要高度可缩放性的应用，如图标、图表和其他复杂的交互式界面元素。
  • Canvas：更适合需要大量计算和重新绘制的应用，如视频游戏、图像编辑和实时视频处理。

7.6. 总结 ​

选择SVG还是Canvas取决于具体的应用需求：

  • 如果你需要高质量的图形，如图标和矢量图，且希望它们具有良好的缩放性和可访问性，那么SVG可能是更好的选择。
  • 如果你的项目涉及到复杂的动画、游戏或需要大量动态图形处理，Canvas将可能提供更好的性能和灵活性。

8. 📒 区分 Image 和 Graphic ​

Image 和 Graphic 理解这俩词的区别，对于理解 svg 和 canvas 的差异有所帮助。

从“中文”表述的角度来看，在 svg、canvas 的相关文章中，对于“图形”、“图像”这俩词，很多时候都是混着用的。

之所以会记录 Image 和 Graphic 之间的区别，主要是因为 SVG 的全称（Scalable Vector Graphics）中出现了 Graphics 这个词，同时在 canvas 中，对应的词是 Image，所以在此简单记录一下，什么是 Image、Graphic，它们之间的区别又是什么。

在学习 SVG 以及更广泛地讨论计算机图形学时，理解“图像”和“图形”这两个词的区别确实有其价值。这两个概念虽然在日常语言中经常交替使用，但在技术上有着明确的区别，特别是在处理图形数据和渲染技术时。

8.1. 图像（Image） ​

图像通常指的是 像素数据的集合，这些数据以栅格或点阵的形式存储。每个像素都有一个或多个与之关联的颜色值，整体上形成了一幅完整的图像。这种图像的典型例子包括照片和扫描的文档。图像的关键特点是它们的细节和外观是固定的，放大图像会导致分辨率下降，出现像素化。

8.2. 图形（Graphic） ​

图形更多指的是 通过数学表达式定义的图形，例如 SVG 中的形状（圆形、矩形、路径等）。这些图形是矢量的，意味着它们不依赖于像素，而是依赖于路径和形状的描述。矢量图形可以无限放大或缩小，而不会失去质量，因为它们在显示或打印前都是由设备根据矢量路径实时渲染的。

8.3. SVG 中的应用 ​

SVG（Scalable Vector Graphics）是一种使用 XML 格式定义图形的技术。它是一种矢量图形格式，这意味着它描述的是图形而非图像。在 SVG 中，你可以定义形状、路径、文本等元素，并且可以对它们应用变换、样式和动画，这些都是在图形层面进行的操作。

8.4. 结论 ​

在学习 SVG 或任何图形处理相关的技术时，明确图像和图形的概念非常重要。这有助于你更好地理解何时使用 SVG 这样的矢量技术，以及何时可能需要使用像 JPEG 或 PNG 这样的栅格图像格式。理解这些概念可以帮助你选择最适合你的项目需求的工具和技术。