不懂就问系列-Canvas和WebGL是啥关系？

文章推薦指數： 80 %
投票人數：10人

Canvas WebGL 不懂就问 ... Canvas. 先说下Canvas，Canvas（翻译为画布）是HTML5的一个标签，Canvas提供了给JavaScript在浏览器内绘制的能力。

不懂就问系列-Canvas和WebGL是啥关系？ Canvas WebGL 不懂就问 字数统计:765阅读时长:3min  2019/10/15   Share      一直以来我都有一个很大的弱点，就是很多东西不会，但是不敢问，怕别人觉得问题太可笑，结果就是不会的的东西大部分都还不会。

如何解决呢，我认为作为一个程序员，不懂就问，厚脸皮的提出来，这是一项很基本的能力，故开启这个“不懂就问系列”，希望对自己甚至对别人有所帮助。

最近学习制作《一镜到底》的h5页面，用到了PIXI.JS，发现它对于自己的描述是这样的： PixiJSisarenderinglibrarythatwillallowyoutocreaterich,interactivegraphics,crossplatformapplications,andgameswithouthavingtodiveintotheWebGLAPIordealwithbrowseranddevicecompatibility.PixiJShasfullWebGLsupportandseamlesslyfallsbacktoHTML5’scanvasifneeded. PIXI全面支持WebGL但是作为兜底会使用Canvas，就是说他们两是一个层面的东西，有点晕了，查查资料，问问大佬搞清楚一点吧LOL Canvas先说下Canvas，Canvas（翻译为画布）是HTML5的一个标签，Canvas提供了给JavaScript在浏览器内绘制的能力。

1234567891011Canvas

123456functionmain(){varcanvas=document.getElementById("container");varcontext=canvas.getContext("2d");context.fillStyle="rgba(0,0,255,1.0)";context.fillRect(120,10,150,150);} Canvas只支持一些简单的2D绘制，不支持3D，更重要的是性能有限，WebGL弥补了这两方便的不足。

WebGL说WEBGL之前需要先了解下OpenGL,既然涉及到绘图能力，底层方面来说实际上是与显卡的交互，OpenGL是底层的驱动级的图形接口（是显卡有直接关系的，类似于DirectX（玩PC游戏应该都接触过这个）。

但是我们想在浏览器里用JS使用这方面的图形渲染能力呢？这时候出现了WebGL，WebGL（全写WebGraphicsLibrary）是一种3D绘图标准，WebGL允许工程师使用JS去调用部分封装过的OpenGLES2.0标准接口去提供硬件级别的3D图形加速功能 最简单的webgl使用方法， 123456functionmain(){varcanvas=document.getElementById("container");vargl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");gl.clearColor(0.0,0.0,0.0,1.0);//指定清空canvas的颜色gl.clear(gl.COLOR_BUFFER_BIT);//清空canvas} 关系总结Canvas就是画布，只要浏览器支持，可以在canvas上获取2D上下文和3D上下文，其中3D上下文一般就是WebGL，当然WebGL也能用于2D绘制，并且WebGL提供硬件渲染加速，性能更好。

但是WEBGL的支持性caniuse还不是特别好，所以在不支持WebGL的情况下，只能使用Canvas2Dapi，注意这里的降级不是降到Canvas，它只是一个画布元素，而是降级使用浏览器提供的Canvas2DApi，这就是很多库的兜底策略，如Three.js,PIXI等 原文作者：cooperhu 原文链接：http://cooperhu.com/2019/10/15/canvas/ 发表日期：October15th2019,10:52:14am 更新日期：February21st2022,9:45:59am 版权声明：本文采用知识共享署名-非商业性使用4.0国际许可协议进行许可 NextPost 不懂就问系列-为什么git有暂存区这一层 PreviousPost 操作系统中的进程和线程 CATALOG 1.Canvas2.WebGL3.关系总结  Archive Tag Cate Total:19 2020 09/03useEffect(fn,[])不等于componentDidMount() 08/04日语基础学习3-状态表示 07/12日语基础学习2-数字 07/10JavaScript中的正则表达式 06/29日语基础学习1 05/01不懂就问系列-JavaScript到底怎么判断数据类型 2019 11/25不懂就问系列-浏览器里到底有多少种缓存机制 10/21不懂就问系列-为什么git有暂存区这一层 10/15不懂就问系列-Canvas和WebGL是啥关系？ 10/10操作系统中的进程和线程 09/24H5实现图片预览的两种方式和区别 09/10HHKB键盘 09/09WEB开发中涉及的各种宽高 09/07关于双马谈话的感悟 09/03SSH、SSL和HTTPS 09/01Travis-CI持续集成hexo到云服务器 08/31Node模块机制 08/31Nginx配置SSL 08/30关于这个网站 日常 思考 HHKB keyboard scorllTop height width travis CI hexo gem Canvas WebGL 不懂就问 cache expires cache-control last-modified etag javascript 日语 数字 状态 JS File HTML5 nginx ssl Https NODE thread linux OS 暂存区 gitadd gitcommit 白话 浊音 半浊音 SSH SSL encrypt useEffect capturing react-hooks JavaScript 正则  缺失模块。

1、请确保node版本大于6.2 2、在博客根目录（注意不是archer根目录）执行以下命令： npmihexo-generator-json-content--save 3、在根目录_config.yml里添加配置： jsonContent: meta:false pages:false posts: title:true date:true path:true text:false raw:false content:false slug:false updated:false comments:false link:false permalink:false excerpt:false categories:true tags:true daily JavaScript devOps WebGL HTTP javascript 日语 NODE OS Git React React/Hooks 

請為這篇文章評分？

延伸文章資訊