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. elementaryOS系统托盘解决方案

    在用 eOS 的时候,你可能会遇到系统托盘的问题,有些需要托盘的软件比如说 QQ,没办法在 eOS 的 Wingpanel 上显示,一最小化就不见了,或者出现一个 System tray 的窗口,很麻 ...

  2. hdu 4081 Qin Shi Huang's National Road System（最小生成树+dp）2011 Asia Beijing Regional Contest

    同样是看别人题解才明白的 题目大意—— 话说秦始皇统一六国之后,打算修路.他要用n-1条路,将n个城市连接起来,并且使这n-1条路的距离之和最短.最小生成树是不是?不对,还有呢.接着,一个自称徐福的游 ...

  3. java正则表达式Pattern和Matcher

    java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 1.简介:  java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. ...

  4. HDU 1025-Constructing Roads In JGShining's Kingdom（最长不降子序列，线段树优化）

    分析: 最长不降子序列,n很大o(n^2)肯定超,想到了小明序列那个题用线段树维护前面的最大值即可 该题也可用二分搜索来做. 注意问题输出时的坑,路复数后加s #include <map> ...

  5. UINavigationController 操作记录

    //设置字体大小 颜色 { UIColor *color = [UIColor brownColor]; UIFont * font = [UIFont systemFontOfSize:20]; N ...

  6. bzoj 3675 [Apio2014]序列分割（斜率DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3675 [题意] 将n个数的序列分割k次,每次的利益为分割后两部分数值和的积,求最大利益 ...

  7. MFC最大化显示任务栏

    今天2016-07-23   13:26:24又来处理最大化时,窗口任务栏隐藏的bug. 前面已经用了 MINMAXINFO的结构体: typedef struct { POINT ptReserve ...

  8. Red Hat Enterprise Linux 6.4常用命令

    常用命令: profile文件立即生效:source /etc/profile source /home/kituser/.bash_profile 修改文件夹子文件权限:chmod -R 777 / ...

  9. lipo命令

    工作中,xcode工程遇到一个bug file was built for archive which is not the architecture being linked armv7 找了一些资 ...

  10. 在Windows Server 下安装 Oracle 11G 的一般步骤