前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >canvas中的getContext()方法 以及 webgl中的getContext()方法

canvas中的getContext()方法 以及 webgl中的getContext()方法

作者头像
acoolgiser
发布2019-01-17 10:23:53
5.4K0
发布2019-01-17 10:23:53
举报
文章被收录于专栏:acoolgiser_zhuanlan

一、getContext()方法

翻译自:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

语法:canvas.getContext(contextType, contextAttributes);

代码语言:javascript
复制
var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType,contextAttributes);

contextType参数有以下四种:

“2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。 “webgl”(或“experimental-webgl”),创建一个WebGLRenderingContext对象作为3D渲染的上下文,只在实现了WebGL 2的浏览器上可用,实验性特性。 “webgl2”,创建一个WebGL2RenderingContext对象作为3D渲染的上下文,只在实现了WebGL 3的浏览器上可用。 “bitmaprenderer”,创建一个ImageBitmapRenderingContext,用于将位图渲染到canvas上下文上,实验性特性。

contextAttributes参数可传递多个参数集合用来创建渲染上下文:

例如:canvas.getContext('webgl', { antialias: false, depth: false });

contextType为’2d’时的context 属性:

alpha(boolean):表示canvas是否包含一个alpha通道,设为false则浏览器知道背景永远不透明,能加速对于透明场景和图像的绘制。 willReadFrequently(Boolean):表示是否计划有大量的回读操作,频繁调用getImageData()方法时能节省内存,仅Gecko内核浏览器支持。 storage(String):声明使用的storage类型,默认为”persistent”。 contextType为‘WebGL ’时的context 属性:

alpha:Boolean类型,指示画布是否包含alpha缓冲区。 antialias:Boolean类型,指示是否执行抗锯齿。 depth:Boolean类型,表示绘图缓冲区的深度缓冲区至少为16位。 failIfMajorPerformanceCaveat:Boolean类型,指示如果系统性能较低,是否创建上下文。 powerPreference:对用户代理的提示,指示GPU的哪种配置适合WebGL上下文。可能的值是:            “default”:让用户代理决定哪种GPU配置最合适。这是默认值。             “高性能”:优先考虑渲染性能而不是功耗。             “低功耗”:优先考虑节能而不是渲染性能。 premultipliedAlpha:Boolean类型,表示页面合成器将假定绘图缓冲区包含具有预乘alpha的颜色。 preserveDrawingBuffer:如果值为true,则不会清除缓冲区并保留其值,直到作者清除或覆盖。 stencil:Boolean类型,表示绘图缓冲区具有至少8位的模板缓冲区。

二、WebGLRenderingContext接口 中的 getContext()

翻译自:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext

WebGLRenderingContext接口为HTML <canvas>元素的绘图表面提供了OpenGL ES 2.0图形渲染上下文的接口。

为了获得用于2D和/或3D图形渲染的WebGL上下文的访问,调用getContext()一对<canvas>元素,提供“WebGL的”作为参数:

代码语言:javascript
复制
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

获得画布的WebGL渲染上下文后,可以在其中进行渲染。

三、WebGL2RenderingContext接口 中的getContext()

翻译自:https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext

WebGL2RenderingContext接口提供了一个HTML的纸面的OpenGL ES 3.0呈现上下文<canvas>的元素。

要获得此接口的对象,调用getContext()一对<canvas>元素,提供“webgl2”作为参数:

代码语言:javascript
复制
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl2');

WebGL 2是WebGL 1的扩展。该WebGL2RenderingContext接口实现了WebGLRenderingContext接口的所有成员。当在WebGL 2上下文中使用时,WebGL 1上下文的某些方法可以接受其他值。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年01月04日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、getContext()方法
  • 二、WebGLRenderingContext接口 中的 getContext()
  • 三、WebGL2RenderingContext接口 中的getContext()
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档