全端面试题15（canvas）

在前端开发领域，<canvas> 元素和相关的 API 是面试中经常被提及的主题。下面是一些常见的关于 HTML5 Canvas 的面试问题及解答示例：

1. 什么是 <canvas> 元素？

<canvas> 是 HTML5 引入的一个用于图形渲染的标签。它本身并不具备绘图能力，而是一个容器，需要使用 JavaScript 来绘制图形。

2. 如何获取 canvas 上下文？

通过 getElementById 或者 querySelector 获取到 canvas 元素后，使用 getContext('2d') 方法来获取一个 2D 渲染上下文。

3. 解释一下 fillStyle 和 strokeStyle 属性。

fillStyle 用于设置填充图形的颜色，而 strokeStyle 设置描边的颜色。

4. 如何在 canvas 上绘制一条线？

使用 beginPath 开始路径，moveTo 定位起点，lineTo 绘制线段，然后 stroke 来实际绘制。

5. 什么情况下使用 save() 和 restore()？

当需要保存和恢复 canvas 的状态时，比如变换矩阵、颜色、透明度等，可以使用 save() 来保存当前状态，restore() 来恢复到之前保存的状态。

6. 什么是 transform 方法？

transform 方法允许对 canvas 进行缩放、旋转和平移等变换。

7. 如何在 canvas 上绘制文本？

使用 fillText 方法可以绘制文本，需要先设置字体样式、大小和颜色。

8. 如何在 canvas 上添加图像？

使用 drawImage 方法可以将图像绘制到 canvas 上。

9. 你能解释一下 requestAnimationFrame 吗？

requestAnimationFrame 是一个用于动画循环的函数，它告诉浏览器你希望执行一个动画，并要求浏览器在下一次重绘前调用指定的函数更新动画。

10. 举例说明如何使用 canvas 实现一个简单的动画。

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

let x = 50;
let y = 50;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI * 2, false);
    ctx.fillStyle = '#0095DD';
    ctx.fill();
    x++;
    y++;

    if (x > canvas.width) {
        x = 0;
    }
    if (y > canvas.height) {
        y = 0;
    }

    requestAnimationFrame(draw);
}

draw();

11. canvas与svg相比，有哪些优势和劣势？

<canvas> 和 <svg> 都是现代 Web 开发中用于图形渲染的技术，但它们有着本质的不同。

<canvas> 的优势：

1. 性能：

   • 当处理大量像素级别的图形或动画时，<canvas> 可能比 <svg> 更高效，尤其是在需要频繁重绘的场景下，例如游戏开发。

2. 灵活性：

   • <canvas> 提供了高度的定制性和控制力，可以绘制任何像素级别的细节，非常适合动态生成的图形和复杂动画。

3. WebGL支持：

   • <canvas> 支持 WebGL，这允许在浏览器中进行硬件加速的 3D 图形渲染，而 <svg> 本身并不直接支持 3D 图形。

4. 数据 URL：

   • <canvas> 可以使用 toDataURL 方法将图像转换为数据 URL，这使得它容易被用作图像处理和导出工具。

5. 图像密集型应用：

   • 对于图像密集型的应用，如实时策略游戏或模拟器，<canvas> 的像素级渲染能力更有优势。

<canvas> 的劣势：

1. 矢量图形：

   • <canvas> 使用像素来绘制图形，这意味着当图像被放大时可能会出现锯齿或模糊，而 <svg> 则保持矢量图形的清晰度。

2. DOM结构和可访问性：

   • <canvas> 本身不产生可被选择或交互的 DOM 结构，这可能会影响到图形的可访问性和搜索引擎优化。而 <svg> 图形是基于 DOM 的，每个图形元素都是可选择、可索引的。

3. 文本处理：

   • <canvas> 在文本渲染方面不如 <svg> 强大。<svg> 支持更复杂的文本布局和样式，且文本可以被搜索引擎识别。

4. 复杂度和渲染速度：

   • 尽管 <canvas> 在某些场景下性能较好，但在处理非常复杂的场景时，如果过度使用 DOM 更新，也可能导致渲染速度变慢。

5. 事件处理：

   • <canvas> 上的事件处理通常需要手动实现，因为它不像 <svg> 那样自然地支持事件处理器。在 <canvas> 上，事件通常需要通过监听整个 <canvas> 元素并计算鼠标位置来处理。

6. 保存和编辑：

   • <canvas> 的内容不容易被保存为矢量格式，而 <svg> 可以轻松地以 .svg 文件格式保存和编辑。

在选择 <canvas> 或 <svg> 时，应当根据项目的需求来决定。如果需要高性能的像素级渲染或 3D 图形，<canvas> 是更好的选择；如果需要矢量图形、良好的文本处理能力和可访问性，则 <svg> 更合适。