canvas 的理解实践

随着数据可视化的发展 canvas 与 webGL 用的也越来越多，那么今天一起来学习学习吧!

一、canvas

canvas 属于 HTML5 新增的内容，我们首先看一下各个浏览器的支持：查询地址；下图可以看到，基本上所有的主流浏览器都可以支持，当然 IE6-8除外。

canvas 是什么？
Canvas API 提供了一个通过JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

在这里插入图片描述

1. canvas 的基础使用

开头提到 canvas 是用来绘图的，那么 canvas 的坐标系是怎么定义的呢？其实和我们高中所学到的坐标系基本上差不多，看下图，以原点为坐标开始绘制
在这里插入图片描述
这个简单的例子在画布绘制一个绿色的长方形。
Document.getElementById() 方法获取 HTML <canvas> 元素的引用。接着，HTMLCanvasElement.getContext() 方法获取这个元素的 context ——图像稍后将在此被渲染。
由 CanvasRenderingContext2D 接口完成实际的绘制。fillStyle 属性让长方形变成绿色。fillRect() 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 高 100。

<canvas id="canvas"></canvas>

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

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

以上就是最基础的使用，接下来我们用几个简单的图形来逐步了解 canvas。

2. canvas API 绘制基础图形

2.1 实心矩形

ctx.fillRect(x, y, width, height)

2.2 空心矩形

绘制空心矩形将用到以下 canvas API

1. ctx.strokeRect(x, y, width, height)：
2. ctx.clearRect(x, y, width, height)：

2.3 三角形

绘制三角形将用到以下 canvas API

1. **beginPath()**：原先绘制的路径列表清空，会清空子路径列表开始一个新路径的方法。当你想创建一个新的路径时，调用此方法
2. **moveTo(x, y)**：将一个新的子路径的起始点移动到 (x，y) 坐标的方法
3. **lineTo(x, y)**：使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）
4. **closePath()**：尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作
5. **stroke()**：根据当前的画线样式，绘制当前或已经存在的路径的方法
6. **fill()**：根据当前的填充样式，填充当前或已存在的路径的方法

2.3 笑脸

绘制笑脸将用到以下 canvas API

1. **beginPath()**
2. **arc(x, y, radius, startAngle, endAngle, anticlockwise)**：绘制圆弧路径的方法,
		1. x：圆心横坐标
		2. y：圆心纵坐标
		3. radius：半径
		4. startAngle：圆弧起始角度
		5. endAngle：圆弧结束角度
		6. anticlockwise：可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。
3. **moveTo()**

3. canvas 相关面试题

3.1 canvas 如何做到自适应

假设我们现在有一个容器，宽和高是固定好的，里面使用 canvas 绘制的图片也是固定的宽高，但是此刻容易的宽高变了一下，那 canvas 绘制的图片该如何做呢？

window.resize 监听 canvas 容器的变化，使 canvas 对应变化

3.1 canvas 与 SVG 的区别

canvas 属于是 HTML5 新增的功能，提供的是底层基础的API，更偏向于基础，基于2D进行一些渲染
SVG 通常会用来展示一些静态矢量图

发展：canvas 最早在没进入 W3C 之前，是 Apple 私有的绘制图像的功能，发展上来说 canvas 比 SVG 更新；
功能：canvas 更简单，核心是 2D 绘图API，虽然有3D，但是浏览器的支撑不够好且API不够完善；SVG 功能相对丰富，做各种矢量图；
特点：canvas 是由脚本驱动的，SVG 可以使用XML、CSS、元素的操作来实现；
元素：canvas 是单个 HTML 的承载元素，SVG 是多种图形元素；
性能：canvas 更适合小型图，SVG 更适合大面积图形；

二、WebGL

WebGL 全称 Web Graphics Library 是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。