WebGL入门系列一

WEB前端 waitig 442℃ 百度已收录 0评论

一、WebGL简述

  普通网页由HTML和JavaScript组成,WebGL网页多了GLSLES(着色器语言)。WebGL采用HTML5的元素来定义绘图区域,然后通过JavaScript内嵌GLSL ES在元素中绘制三维图形。
  元素可以同时支持二维图形和三维图形,它不直接提供绘图方法,而是通过下上文(Context)来绘制图形。

二、绘制二维图形

  首先创建一个画布canvas,它在网页中是一个矩形框,通过元素来绘制。默认情况下元素没有边框和内容。元素本身是没有绘制图形能力的,所有的工作都在JavaScript内部完成。下面创建一个线性渐变,使用渐变填充画布。
  

JavaScript代码如下:

//获取canvas元素
var canvas = document.getElementById('myCanvas');
//获取绘制二维上下文
var ctx = canvas.getContext('2d');
//创建渐变
var grd=ctx.createLinearGradient(0,0,600,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(0,0,600,450);

运行结果如下:

这里写图片描述

代码分析:

● createLinearGradient(x,y,x1,y1) – 创建线条渐变
● 当我们使用渐变对象,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1。

参考资料:

http://www.runoob.com/html/html5-canvas.html


本文由【waitig】发表在等英博客
本文固定链接:WebGL入门系列一
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)