canvas1

Canvas 是什么？

• Canvas 中文名叫 “画布”，是 HTML5 新增的一个标签。
• Canvas 允许开发者通过 JS 在这个标签上绘制各种图案。
• Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
• Canvas 在某些情况下可以 “代替” 图片。
• Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等领域。

Canvas 和 SVG 的区别

就上面的描述而言可能有点难懂，可以打开 AntV 旗下的图形编辑引擎做对比。 G6 是使用 canvas 开发的， X6 是使用 svg 开发的。

建议：如果要展示的数据量比较大，比如一条数据就是一个元素节点，那使用 canvas 会比较合适；如果用户操作的交互比较多，而且对清晰度有要求（矢量图），那么使用 svg 会比较合适。

起步

本例会画一条直线。

画条直线

1. 在 HTML 中创建 canvas 元素
2. 通过 js 获取 canvas 标签
3. 从 canvas 标签中获取到绘图工具
4. 通过绘图工具，在 canvas 标签上绘制图形

 1<!-- 1、创建 canvas 元素 -->
 2<canvas
 3  id="c"
 4  width="300"
 5  height="200"
 6  style="border: 1px solid #ccc;"
 7></canvas>
 8
 9<script>
10  // 2、获取 canvas 对象
11  const cnv = document.getElementById('c')
12
13  // 3、获取 canvas 上下文环境对象
14  const cxt = cnv.getContext('2d')
15
16  // 4、绘制图形
17  cxt.moveTo(100, 100) // 起点坐标 (x, y)
18  cxt.lineTo(200, 100) // 终点坐标 (x, y)
19  cxt.stroke() // 将起点和终点连接起来
20</script>

moveTo 、 lineTo 和 stroke 方法暂时可以不用管，它们的作用是绘制图形，这些方法在后面会讲到~

注意点

1、默认宽高

canvas 有 默认的 宽度(300px) 和 高度(150px)

如果不在 canvas 上设置宽高，那 canvas 元素的默认宽度是300px，默认高度是150px。

2、设置 canvas 宽高

canvas 元素提供了 width 和 height 两个属性，可设置它的宽高。

需要注意的是，这两个属性只需传入数值，不需要传入单位（比如 px 等）。

1<canvas width="600" height="400"></canvas>

3、不能通过 CSS 设置画布的宽高

使用 css 设置 canvas 的宽高，会出现 内容被拉伸 的后果！！

 1<style>
 2  #c {
 3    width: 400px;
 4    height: 400px;
 5    border: 1px solid #ccc;
 6  }
 7</style>
 8
 9<canvas id="c"></canvas>
10
11<script>
12  // 1、获取canvas对象
13  const cnv = document.getElementById('c')
14
15  // 2、获取canvas上下文环境对象
16  const cxt = cnv.getContext('2d')
17
18  // 3、绘制图形
19  cxt.moveTo(100, 100) // 起点
20  cxt.lineTo(200, 100) // 终点
21  cxt.stroke() // 将起点和终点连接起来
22
23  console.log(cnv.width) // 获取 canvas 的宽度，输出：300
24  console.log(cnv.height) // 获取 canvas 的高度，输出：150
25</script>

canvas 的默认宽度是300px，默认高度是150px。

1. 如果使用 css 修改 canvas 的宽高（比如本例变成 400px * 400px），那宽度就由 300px 拉伸到 400px，高度由 150px 拉伸到 400px。
2. 使用 js 获取 canvas 的宽高，此时返回的是 canvas 的默认值。

最后出现的效果如上图所示。

4、线条默认宽度和颜色

线条的默认宽度是 1px ，默认颜色是黑色。

但由于默认情况下 canvas 会将线条的中心点和像素的底部对齐，所以会导致显示效果是 2px 和非纯黑色问题。

5、IE兼容性高

暂时只有 IE 9 以上才支持 canvas 。

如需兼容 IE 7 和 8 ，可以使用 ExplorerCanvas。但即使是使用了 ExplorerCanvas 仍然会有所限制，比如无法使用 fillText() 方法等。