Canvas getContext("3d")?

前言

不好意思，标题其实是开了个玩笑。大家都知道，Canvas 获取绘画上下文的 api 是 getContext("2d")。我第一次看到这个 api 定义的时候，就很自然的认为，既然有 2d 那一定是有 3d 的咯？ 但是我接着我看到了 api 介绍的这句话

提示：在未来，如果 canvas 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。

what? 我有一句妈卖批不知当讲不当讲... 从接触 canvas 之后我就一直等这个未来，等到后来我学习 three.js... 再等到现在，这个 getContext("3d") 还是没有出来。可能是因为越来越多浏览器都已经支持 webGL 的原因把，这个 getContext("3d") 有可能再也不会来了。

webGL 就是浏览器端的 3D 绘图标准，它直接借助系统显卡来渲染 3D 场景，它能制作的 3D 应用，是普通 canvas 无法相比的。所以，你有复杂的 3D 前端项目，且不考虑 IE 的兼容性的话。不用说，直接使用 webGL 吧。

不使用 webGL 制作简单的 3D 效果

然而，有的时候我们只需要实现简单的 3D 效果。在没有学习 webGL 或这方面的框架的情况下，我们其实也可以在普通的 canvas api 基础上制作出来。而且，我们可以兼容 IE 9。先来看看，我们都能做些什么效果。

https://www.meizu.com/products/pro6/summary.html

https://www.meizu.com/products/pro6/performance.html

这的两个效果都是工作时简单的 3D 效果需求，没有必要使用 webGL。然而当时我并没有使用今天介绍的办法，因为没有扩展到 3D 坐标去实现所以只能很繁琐的转换成 2D 平面图形分析出来。