首页 > 其他分享 >【WebGL系列-01】获取WebGL上下文

【WebGL系列-01】获取WebGL上下文

时间:2023-07-24 13:47:35浏览次数:32  
标签:canvas 01 WebGL 获取 boolean WebGLRenderingContext 缓冲区 上下文

获取WebGL上下文

获取上下文

WebGL上下文是从<canvas>标签中获取到的,通过canvas对象的getContext()函数可以获取WebGLRenderingContext

跟据参数的不同,getContext()函数可以获取不同种类的渲染上下文。

接口

canvas.getContext(contextType: String, contextAttributes ?: Object)

  • contextType:

    • '2d':建立一个CanvasRenderingContext2D二维渲染上下文
    • 'webgl''experimental-webgl':创建一个WebGLRenderingContext三维上下文对象,只在实现WebGL1的浏览器上可用
    • 'webgl2''experimental-webgl2':创建一个WebGL2RenderingContext三维渲染上下文对象,只在实现WebGL2的浏览器上可用
    • 'bitmaprenderer':创建一个只提供将canvas内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext
  • contextAttributes:

    • contextType2d时:

      • alpha:boolean,表明canvas包含一个alpha通道。如果设置为false,浏览器默认canvas背景总是不透明的,可加速绘制透明物体
      • willReadFrequently (Gecko only):boolean,表示是否有重复读取计划。经常使用getImageData()会导致软件使用2D canvas并节省内存,适用于存在属性gfx.canvas.willReadFrequently的环境
      • storage (Blink only):string,表示使用哪种方式存储,默认为"presistent"持久性存储
    • 当使用webgl上下文时:

      • alpha:boolean,表明canvas包含一个alpha缓冲区
      • antialias:boolean,表明是否开启抗锯齿
      • depth:boolean,表明绘制缓冲区包含一个深度至少为16位的缓冲区
      • failIfMajorPerformanceCaveat:表明在一个系统性能低的环境是否创建该上下文的boolean值
      • powerPreference:指示浏览器在运行webgl上下文时使用相应的GPU电源配置,可能的值有
        • "default":默认,自动选择
        • "high-performance":高性能模式
        • "low-power":节能模式
      • premultipliedAlpha:boolean,表明排版引擎将假设绘制缓冲区包含预混合alpha通道
      • preserveDrawingBuffer:boolean,如果为true,缓冲区将不会被清除,会保存袭来,直到被清除或被覆盖
      • stencil:boolean,表明绘制缓冲区包含一个深度至少为8为的模板缓冲区

当要获取一个上下文对象的contextAttributes时,可以使用接口context.getContextAttributes()来获取

返回值

  • CanvasRenderingContext2D:当ContextType"2d"
  • WebGLRenderingContext:当ContextType"webgl""experimental-webgl"
  • WebGL2RenderingContext:当ContextType"webgl2""experimental-webgl2"
  • ImageBitmapRenderingContext:当ContextType"bitmaprenderer"

获取上下文事件

canvas获取上下文会触发以下事件:

  • contextlost (experimental):当获取的CanvasRenderingContext2D上下文丢失时会触发
  • contextrestored (experimental):在用户代理恢复CanvasRenderingContext2D时会触发
  • webglcontextcreatingerror:在用户无法创建WebGLRenderingContext上下文时触发
  • webglcontextlost:在用户代理检测到绘制缓冲关联的WebGLRenderingContext上下文丢失时会触发
    - webglcontextrestored:在用户代理恢复WebGLRenderingContext对象的绘制缓冲时会触发

标签:canvas,01,WebGL,获取,boolean,WebGLRenderingContext,缓冲区,上下文
From: https://www.cnblogs.com/masakulayou/p/17576993.html

相关文章

  • 【WebGL系列-02】创建program上下文
    WebGL程序program对象的创建program对象由顶点着色器对象和片元着色器对象构成,因此,创建program对象包含了两部分,一个是着色器对象的创建,一个是program对象的创建。总体流程创建顶点着色器对象创建片元着色器对象创建program对象将顶点着色器和片元着色器添加到程序中将程......
  • 【WebGL系列-03】获取shader变量地址及赋值
    获取shader变量地址及赋值上一节创建了WebGL程序对象,创建好program对象后,对象中包含顶点着色器和片元着色器,着色器中含有变量,我们需要对其进行赋值后才能够进行绘制。着色器代码如下:constVSHADER_SOURCE=/*glsl*/`attributevec4a_Position;voidmain(){gl_P......
  • 【WebGL系列-04】清除缓冲区并绘制图形
    清除缓冲区并绘制图形前文中已经准备好了webgl程序和绘制所用的数据,但是在绘制图像之前,还要对画布进行处理。清除缓冲区由于图像的绘制是一帧一帧绘制,每一帧针对当前的状态,计算屏幕上每个像素的颜色,得到最终的绘制结果。这些状态被保存在一个叫帧缓冲区的地方。帧缓冲区不仅能......
  • 洛谷AT_jsc2019_qual_e Card Collector 题解
    题目链接CardCollector-洛谷|计算机科学教育新生态(luogu.com.cn)思路将每一行、每一列转化为点,第i行第j列的卡牌转化为i->j+m(m为行数)的有向边。总共会抽取m+n(m为行数,n为列数)张牌,每个点的出度为1。结果图为基环森林;那么题目就转化为求最大基环森林。代码1#include......
  • 记录windows、vs2019、c++、cuda环境配置
    原文链接:   (45条消息)CUDA+Windows+VS环境配置_cudavs_哈哈哈哈哈嗝哈哈哈的博客-CSDN博客            VS2019--c++CUDA环境配置与编程实例-知乎(zhihu.com)测试代码:.cu文件中:#include"stdio.h"#include<cuda_runtime.h>#include<devi......
  • 打造原生 WebGL 2D 引擎:一场创意与技术的融合
    打造原生WebGL2D引擎:一场创意与技术的融合1.引言在当今数字化时代,网页的功能越来越丰富,已经远远超越了传统的文本和图片呈现。我们生活在一个充满交互性和视觉魅力的网络世界。每天都会遇到许多令人惊叹的网页效果和动画。作为一个Web3D图形的开发,希望可以通过网页来实现更多......
  • P3750 [六省联考 2017] 分手是祝愿
    本篇为该题解的补充与说明处理出来一共有个多少的要摁的开关(最优的方法是摁多少次)我们可以先从\(k\)入手,从后往前扫,只要遇到\(1\)的位置就操作,并更新编号为\(i\)的约数的点一个点不会被操作\(2\)次以上,因为\(2\)次操作相当于没操作操作\(i\)不会影响到比ii......
  • 在windows平台使用Visual Studio 2017编译动态库并使用
    使用VSstdio制作顺序表的库文件.lib与.dll区别lib是编译时需要的dll是运行时需要的1、新建头文件和源文件SeqList.h//SeqList.h#ifndefSEQLIST_H__#defineSEQLIST_H__#defineN10typedefintSLDataType;typedefstructSeqList{ SLDataTypedata[N]......
  • P3352 [ZJOI2016] 线段树 思考--zhengjun
    有一个显然的\(O(n^3q)\)的做法:设\(f_{i,l,r,x}\)表示\(i\)次操作过后,区间\([l,r]\)的数\(\lex\),\(a_{l-1},a_{r+1}>x\)的方案数。转移:$$f_{i,l,r,x}=f_{i-1,l,r,x}\timesg_{l,r}+\sum\limits_{j<l}f_{i-1,j,r,x}\times(j-1)+\sum\limits_{j>r}f_{i-1,l......
  • [极客大挑战 2019]Http
    [极客大挑战2019]Http题目来源:buuctf题目类型:web涉及考点:HTTP请求头1.先简单介绍一下这题将要用到的几个header组成部分名称作用referer记录当前请求页面的来源页面的地址。比如在https://www.xxxx.com里有一个www.baidu.com链接,那么点击这个www.baidu.com,它......