canvas教程

WebGL Context上下文

字号+ 作者:H5之家 来源:H5之家 2017-11-16 15:02 我要评论( )

要编写一个WebGL的应用程序,第一步是让WebGL渲染上下文 - Context 对象。这个对象与 WebGL 绘制缓冲区进行交互,可以调用所有WebGL的方法。执行以下操作来获取W

要编写一个WebGL的应用程序,第一步是让WebGL渲染上下文 - Context 对象。这个对象与 WebGL 绘制缓冲区进行交互,可以调用所有WebGL的方法。执行以下操作来获取WebGL的上下文-

  • 创建HTML5 canvas

  • 获取画布 canvas 的 ID

  • 获取WebGL

  • 创建HTML5 canvas元素

    我们知道,建立一个HTML5 canvas 元素 -

  • 在HTML5主体内写入canvas语句声明

  • 给定 canvas 一个ID

  • 使用高度和宽度(height & width)属性(可选)更改画布尺寸
  • 一个例子在这里应该更清楚。

    示例

    下面的例子说明如何创建一个 canvas 元素。创建了一个边框使用 CSS 可视性画布的尺寸(500×500)。复制并粘贴到下面的代码到 my_canvas.html 文件。

    <!DOCTYPE HTML> <html> <head> <title>Canvas示例 -</title <style> #mycanvas{border:1px solid blue;} </style> </head> <body> <canvas id = "mycanvas" width = "300" height = "300"></canvas> </body> </html>

    这将产生以下结果 -


    获取Canvas的ID

    Canvas ID是通过调用DOM(文档对象模型)的getElementById()方法获得的。这个方法接受一个字符串值作为参数,所以我们传递了当前 Canvas 的名字。

    例如,如果 canvas 名称是my_canvas,则canvas ID被得到 - 如图如下

    var canvas = document.getElementById('my_Canvas'); 获取WebGL的绘图上下文

    为了得到 WebGLRenderingContext 对象(或图形的WebGL上下文对象或只在WebGL的情况下),调用当前 HTMLCanvasElement 的getContext()方法。getContext()的语法如下 -

    canvas.getContext(contextType, contextAttributes);

    通过 WebGL字符串或experimental-webgl 作为 contentType。contextAttributes参数是可选的。 (虽然在进行这一步,请确保您的浏览器实现了WebGL 1.0版本(OpenGL ES 2.0))。

    下面的代码片段展示了如何获取WebGL的渲染上下文。在这里,gl是参考变量所获得的上下文对象。

    var canvas = document.getElementById('my_Canvas'); var gl = canvas.getContext('experimental-webgl'); WebGLContextAttributes

    参数 WebGLContextAttributes 不是强制性的。此参数提供接受布尔值,如下面列出各种选项 -

    Alpha

    如果它的值是 true,它提供了一个alpha缓冲区到画布上。默认情况下,它的值是 true

    depth

    如果它的值是true,会得到一个绘图的缓冲区,其中包含至少16位的深度缓冲。默认情况下,它的值是true

    stencil

    如果它的值是true,会得到一个绘图的缓冲区,其中包含至少8位的模板缓存。默认情况下,它的值是false

    antialias

    如果它的值是true,会得到一个绘图缓冲区,执行抗锯齿。默认情况下,它的值是true

    premultipliedAlpha

    如果它的值是true,会得到一个绘图缓冲区,其中包含的颜色与预乘alpha。默认情况下它的值是true

    preserveDrawingBuffer

    如果它的值是true,缓冲区将不会被清零,直到被清除或由作者改写将保留它们的值。默认情况下,它的值是false

    下面的代码片段展示了如何创建一个WebGL的上下文模板缓存,这将不执行抗锯齿。

    var canvas = document.getElementById('canvas1'); var context = canvas.getContext('webgl', { antialias: false, stencil: true });

    在创建 WebGLRenderingContext 的时候,一个绘图缓冲器被创建。上下文对象管理OpenGL 状态,并呈现到图形缓冲区。

    WebGLRenderingContext

    它是 WebGL 的主要接口。它表示 WebGL 绘图上下文。该接口包含了所有用于在绘图缓冲执行各种任务的方法。此接口的属性给出在下表中。

    S.No.

    属性和说明

    1

    Canvas

    这是一个对创建此 canvas 元素的上下文

    2

    drawingBufferWidth

    此属性表示绘图缓冲器的实际宽度。它可以不同于 HTMLCanvasElement 的宽度属性。

    3

    drawingBufferHeight

    此属性表示绘图缓冲器的实际高度。它可以不同于 HTMLCanvasElement 的高度属性。



    加QQ群啦!

    JAVA技术群(2000人群): 227270512
    MySQL/SQL群(2000人群): 418407075
    Python技术群(2000人群): 287904175
    大数据开发群(2000人群): 655154550(Java,Python,R,Scala,Hadoop,Spark,zookeeper,kafka等技术)
    Web开发群(新群): 460153241 (PHP,HTML/HTML5,JS/JQuery,CSS等技术)
    Linux技术群(新群): 479429477(Redhat/Centos,Ubuntu,Shell,运维,监控等技术)
    人工智能&深度学习(新群): 456236082 (人工智能,深度学习,算法等技术)

    易百教程移动端:请扫描本页面底部(右侧)二维码关注微信公众号,或直接手机访问:

    上一篇:下一篇:

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • HTML5 学习笔记(四)canvas绘图、WebGL、SVG

      HTML5 学习笔记(四)canvas绘图、WebGL、SVG

      2017-10-25 11:21

    • 炫丽的倒计时效果Canvas绘图与动画视频的资源推荐

      炫丽的倒计时效果Canvas绘图与动画视频的资源推荐

      2017-10-22 18:01

    • HTML5 canvas基本绘图之图形变换

      HTML5 canvas基本绘图之图形变换

      2017-10-18 16:00

    • Html5 Canvas 概述,学习WebGL,WebGL教程,WebGL参考手册

      Html5 Canvas 概述,学习WebGL,WebGL教程,WebGL参考手册

      2017-10-18 12:04

    网友点评
    s