canvas是什么

是H5新增的标签，可以完成绘制图形、图像和动画；可以直接用JavaScript进行动态绘制图形，而不必使用图像编辑器。

canvas的优缺点

优点：

灵活性高：Canvas 提供了一个绘图容器，可以通过 JavaScript 动态生成图形，实现各种交互效果，例如动画、游戏等。
性能优异：Canvas 使用 GPU 加速绘制，对于大规模绘制和复杂图形，性能表现较好。
绘制任意图形：Canvas 不仅可以绘制简单的形状，还可以绘制复杂的图形、图像处理、渐变、阴影等。
适用于动态图形：Canvas 适合绘制需要频繁更新的动态图形，例如实时数据可视化、游戏等。

缺点：

不支持文档对象模型（DOM）：Canvas 只是一个绘图容器，无法直接操作其中的图形元素，因此在需要与其他 HTML 元素进行交互时，需要额外的处理。
不利于 SEO：Canvas 中的内容无法被搜索引擎索引，对于需要搜索引擎优化的网页内容不适用。
复杂动画效果开发难度大：Canvas 动画需要通过 JavaScript 控制绘制，相比使用 CSS 或 SVG 实现的动画效果，开发难度较大。
对开发者要求较高：Canvas 绘图需要具备一定的图形学和编程知识，对开发者的要求较高，入门门槛相对较高。

总的来说，Canvas 在绘制动态图形和游戏等方面具有优势，但在需要与 DOM 元素交互和对 SEO 要求较高的情况下，可能不太适用。

基本用法

 <canvas id="myCanvas" width="400" height="200"></canvas> <!-- 创建画布 -->
    // 获取 Canvas 元素
    var canvas = document.getElementById('myCanvas');
    // 获取绘图上下文
    var ctx = canvas.getContext('2d');

    // 绘制矩形
    ctx.fillStyle = 'red'; // 设置填充颜色
    ctx.fillRect(50, 50, 100, 100); // 绘制实心矩形，参数依次为 x 坐标、y 坐标、宽度、高度

    // 绘制文本
    ctx.font = '20px Arial'; // 设置字体样式
    ctx.fillStyle = 'blue'; // 设置文本颜色
    ctx.fillText('Hello, Canvas!', 50, 180); // 绘制文本，参数依次为文本内容、x 坐标、y 坐标

    // 绘制路径
    ctx.beginPath(); // 开始路径
    ctx.moveTo(200, 50); // 移动到起始点
    ctx.lineTo(250, 100); // 添加直线路径
    ctx.lineTo(200, 150); // 添加直线路径
    ctx.closePath(); // 封闭路径
    ctx.strokeStyle = 'green'; // 设置描边颜色
    ctx.stroke(); // 描边路径

练习

面试准备之canvas

canvas是什么

canvas的优缺点

基本用法