In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Setup</title>

</head>

<body>

    <canvas id="canvas" width="600" height="600"></canvas>

    <script src="./mian.js"></script>

</body>

</html>
var gl;

initGL();

draw();

function initGL(){

    var canvas = document.getElementById("canvas");

    gl = canvas.getContext("webgl");

    gl.viewport(0,0,canvas.width, canvas.height);

    gl.clearColor(1,0,0,1); //red, blue, green, alpha

}

function draw(){

    gl.clear(gl.COLOR_BUFFER_BIT); //Paint the color to the canvas

}

[WebGL] Setting Up WebGL的更多相关文章

  1. WebGL自学教程——WebGL演示样本：开始

    最终开始WebGL样品演示,...... 开始 使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的 ...

  2. WebGL自学教程——WebGL演示样例：開始

    最终開始WebGL的演示样例了,...... 開始 使用WebGL的步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊> ...

  3. 【WebGL】《WebGL编程指南》读书笔记——第6章

    一.前言        最近重感冒发烧,妈蛋好难受,请假了3天,驾校也没去,简直僵硬!今天继续WebGL的学习. 二.正文        A. GLSL支持两种数据值类型: 整数型(int)与浮点型( ...

  4. 【WebGL】《WebGL编程指南》读书笔记——第5章

    一.前言        终于到了第五章了,貌似开始越来越复杂了. 二.正文         Example1:使用一个缓冲区去赋值多个顶点数据(包含坐标及点大小) function initVerte ...

  5. 【WebGL】《WebGL编程指南》读书笔记——第3章

    一.前言 根据前面一章的内容,继续第三章的学习. 二.正文       一起绘制三个点,这里要使用到缓存了 var n = initVertexBuffers(gl); //返回绘制点的个数 n ) ...

  6. 【WebGL】《WebGL编程指南》读书笔记——第2章

    一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> ...

  7. 【WebGL】1.WebGL简介

    OpenGL和WebGL基本概念 OPEN GL:一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. WebGL:›一个3D ...

  8. 【WebGL】《WebGL编程指南》读书笔记——第4章

    一.前言        今天继续第四章的学习内容,开始学习复合变换的知识. 二.正文        Example1: 复合变换 在书中,作者为我们封装了一套用于变换的矩阵对象:Matrix4对象.它 ...

  9. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

随机推荐

  1. MyBatis批量删除 多态sql，构建in语句

    <!--==========================删除==================================== -->    <delete id=&quo ...

  2. SQL点滴之编辑数据(转)

    数据库中的数据编辑是我们遇到的最频繁的工作,这一个随笔中我来总结一下最常用的数据编辑. select into 经常遇到一种情况是,我们希望创建一个新表,表中的数据来源于原有的一个表:原有一个表,但是 ...

  3. python 资料

    主站: 主页:http://python.org/下载:http://python.org/download/文档:http://python.org/doc/ books: ActivePython ...

  4. 同行评审 Peer Review

    周五的课上,章老师给我们上了一节关于同行评审(Peer Review)的课程,让我了解了以前并不熟悉的这一过程.课上我们就姚思丹同学项目组做的项目,分组进行了审查. 首先介绍一下同行评审(Peer R ...

  5. ARM处理机模式--内部寄存器

    处理器模式 用户模式(user)简称usr 快速中断模式(FIQ)简称fiq 外部中断模式(IRQ)简称irq 特权模式(supervisor)简称sve 数据访问终止模式(abort)简称abt 未 ...

  6. iOS数据存储之对象归档

    iOS数据存储之对象归档 对象归档 对象归档是iOS中数据持久化的一种方式. 归档是指另一种形式的序列化,但它是任何对象都可以实现的更常规的类型.使用对模型对象进行归档的技术可以轻松将复杂的对象写入文 ...

  7. maven学习系列第二课，关于springmvc的pop.xml的依赖的添加

    不说废话了,图的书序就是操作顺序 1. 2.

  8. spoj 839 Optimal Marks（二进制位，最小割）

    [题目链接] http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=17875 [题意] 给定一个图,图的权定义为边的两端点相抑或值的 ...

  9. C++ 我想这样用（五）

    上一篇说了[C with Class]语法的第一部分,下面继续第二部分: 第二部分:面向过程的编程风格 什么是面向过程我想如果你还不知道,那你绝对不是C程序员!其实我个人感觉面向过程.模块式的C编程风 ...

  10. Activity生命周期与状态保存

    弹出系统对话框,程序仍部分可见 onPause 对话框消失时 onResume   调用一个新的Activity,老的Activity不可见时 onPause->onStop 从新的Activi ...