WebGL - 概述和 canvas 基础示例

1、webgl概述

1、概述

博客 webgl 示例大部分基于《 webg l编程指南》一书而来,所以你也可以直接去看这本书,如果书中有些代码运行失败的话,再来看这个博客的 webgl 系列,或许对你有些帮助

是一项用来在网页上绘制和渲染辅助三维图形,并允许用户交互的技术,它结合jsh5能更容易和直接的在互联网上展示产品和示例。

开发者不需要具备C或者C++编程语言,仅仅需要会简单的HTMLJS脚本知识就可以上手。

webgl基于浏览器不是基于操作系统,因此不需要安装插件和库,就可以运行webgl程序。

2、起源

webgl起源与OpenGL ES 2.0OpenGL 2.0版本支持了可编程着色器,该特性被OpenGL ES 2.0继承,并成为webgl的核心。

因此webgl有三种所语言开发,HTMLJavaScriptGLSL ESGLSL ES内嵌在JavaScript中。

3、基础示例

使用canvas绘制三维图形,没有webgl之前,只能使用canvas二维图形,因此需要了解一下canvas的绘图机制。

如果不了解可以先去学习一下 http://wangdoc.com/webapi/canvas.html

4、使用canvas绘制一个矩形

默认情况下,canvas是透明的,示例所有代码可以从码云 Gitee上获取,如果你没有的话可以先申请一个,由于国内github访问速度较慢,建议优先使用Gitee

代码仓库地址: https://gitee.com/ithanmang/webgl-notes


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 canvas 绘制一个矩形title>
    <link rel="stylesheet" href="../css/common.css">
head>
<body>
<canvas id="example" width="512" height="512">canvas>
body>
<script>
	
    // 获取canvasDOM元素
    var canvas = document.getElementById('example');
	
    // 获取2D绘图上下文对象
    var ctx = canvas.getContext('2d');
    console.log(ctx);
	
    // 获取canvas的宽高
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
	
    // 填充颜色值
    ctx.fillStyle = 'rgba(255, 0, 255, 0.5)';
    
    // 绘制矩形
    ctx.fillRect(w /2 - 200, h / 2 - 100, 400, 200);

script>
html>

示例浏览地址: https://ithanmang.gitee.io/webgl-notes/

你可能感兴趣的:(webgl)