【笔记】《WebGL编程指南》学习-第2章WebGL入门(1-用canvas画一个蓝色矩形)
来源:互联网 发布:手机淘宝品牌怎么填 编辑:程序博客网 时间:2024/05/16 11:48
这一章开始,就要按照书上教的来敲一敲代码了,要准备的很简单:
- 编辑器(我用的是WebStorm)
- 要下载一下这本书中的程序用到的库(书上的网址好像已经崩了,但网上还有,我当时就在csdn上下的,搜书名就搜的到)
今天的目标:用canvas画一个蓝色矩形!
成果展示:
好,开始学习!
WebGL采用HTML5中新引入的<canvas>元素,它定义了网页上的绘图区域,如果没有WebGL,JS只能在<canvas>上绘制二维图形,有了WebGL,就可以在上面绘制三维图形了。
Canvas是什么
在HTML5出现以前,如果你想在网页上显示图像,只能使用HTML提供的原生方案<img>标签。用这个标签显示图像虽然简单,但只能显示静态的图片,不能进行实时绘制和渲染。因为,后来出现了一些第三方解决方案,如Flash Player等。
HTML5的出现改变了一切,它引入了<canvas>标签,允许JS动态地绘制图形。
艺术家们将画布(canvas译为”画布”)作为绘画的地方,类似地,<canvas>标签定义了网页上的绘图区域。有了<canvas>,你就可以使用JS绘制任何你想画的东西。<canvas>提供一些简单的会凸函数,用来描绘点、线、矩形、圆等。
下面会通过一个简单的示例程序DrawRectangle来了解一下由<canvas>提供的核心函数。(准备开码!)
使用<canvas>标签
让我们先来看一下HTML是如何使用<canvas>标签,以及DrawRectangle函数是如何工作的。
先看一下代码(有个印象):
DrawRectangle.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Draw a blue rectangle(canvas version)</title></head><body onload="main()"> <canvas id="example" width="400" height="400"> Please use a browser that supports "canvas" </canvas> <script src="DrawRectangle.js"></script></body></html>
解析:
1.<canvas id="example" width="400" height="400">
:
定义了<canvas>标签(9行),通过width属性和height属性规定它是一片400x400像素的区域,并用id属性为其制定了唯一的标识符(这将在之后用到)。
2.Please use a browser that supports "canvas"
:
用来针对那些不支持<canvas>的老式浏览器,因为不支持<canvas>的老式浏览器会直接忽略<canvas>标签,所以加入一条错误信息以供提醒。
3.<script src="DrawRectangle.js"></script>
为了在<canvas>中绘图,还需要编写一些相关的JS代码。有两种方法:
- 直接写在HTML文件中
- 写成单独的JS
例子中采用的是第二种。
4.<body onload="main()">
无论你采用哪种方式编写JS代码,都需要告诉浏览器JS代码要从何处开始执行,所以这里为
<body>元素指定onload属性,告诉浏览器<body>元素加载完成后(也就是页面加载完成后)执行main()函数,并作为JS程序的入口。
DrawRectangle.js
首先了解一下在<canvas>上绘制二维图形,需要经过以下三个步骤:
- 获取<canvas>元素
- 向该元素请求二维图形的“绘图上下文”(context,或译绘图环境);
- 在绘图上下文上调用相应的绘图函数,以绘制二维图形。
下面看代码:
DrawRectangle.js
function main() { //获取canvas元素 var canvas = document.getElementById("example"); if(!canvas){ console.log("Failed to retrieve the <canvas> element"); return; } //获取绘制二维图形的上下文 var ctx = canvas.getContext("2d"); //绘制蓝色矩形 ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; //设置填充颜色为蓝色 ctx.fillRect(120,10,150,150); //使用填充颜色填充矩形}
下面我们要对照上面的步骤依次看看
获取<canvas>元素
var canvas = document.getElementById("example"); if(!canvas){ console.log("Failed to retrieve the <canvas> element"); return; }
为了在<canvas>上进行绘制,首先得在HTML文件中通过JS程序获取<canvas>元素。可以使用
document.getElementById 的函数来获取。这个方法只有一个参数,就是HTML文件中<canvas>标签的 id 属性,即字符串 “example” ,它被定义在上面的 DrawRectangle.html 的第9行。
如果函数的返回值不是null,就说明你成功获取了该元素,如果函数返回了null,就说明获取失败了。你可以用一个简单的 if 判断来进行检查,如果获取失败了,就调用 console.log() 在浏览器控制台上显示参考字符串。
通过元素来获取二维图形的绘图上下文
由于<canvas>元素可以灵活地同时支持二维图形和三维图形,它不直接提供绘图方法,而是提供一种叫上下文(context)的机制来进行绘图。
获取这个上下文:
var ctx = canvas.getContext("2d");
canvas.getContext()方法的参数制定了上下文的类型(二维或三维)。在本例中,如果你想绘制二维图形,就必须制定为2d(小写)。
这一行的执行结果就是绘图上下文被存储到了 ctx 变量中待使用。(这里省略了错误检查)
使用上下文支持的方法来绘制二维图形
绘制蓝色矩形的代码分为两步:
1. 在绘图时设置要使用的颜色
2. 用这个颜色绘制矩形
ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; //设置填充颜色为蓝色 ctx.fillRect(120,10,150,150); //使用填充颜色填充矩形
这只颜色的字符串 rgba(0, 0, 255, 1.0) 中的 rgba 指定了:
- r(红色)
- g(绿色)
- b(蓝色)
- a(α:透明度)
前三者在0(最小值)到255(最大值)之间,而 α 在0.0(透明)到1.0(不透明)之间。
计算机系统通常用红、绿、蓝这三原色组合来表示颜色,这种颜色表示方式被称为RGB格式,当α加进来之后,就称为RGBA格式。
然后我们使用 fillStyle 属性指定的填充颜色绘制了矩形。这看这一行的细节之前,来看一下<canvas>元素的坐标系统
如图所示,<canvas>的坐标系统横轴为x轴(正方向向右),纵轴为y轴(正方向朝下)。注意,原点落在左上方。长虚线标出的区域就是HTML文档中的<canvas>元素,我们指定其大小为400x400像素。用点虚线标出的区域就是示例程序绘制的矩形。
当我们使用 ctx.fillRect() 绘制矩形的时候,前两个参数指定了待绘制矩形的左上定点在<canvas>中的坐标,后两个参数指定了矩形的宽度和高度(单位是像素)。
运行DrawRectangle.html文件就可以得到下面的画面(撒花~~)
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(1-用canvas画一个蓝色矩形)
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(3-画一个点-版本1))
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(2-WebGL的HelloWorld)
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(4-画一个点-版本2))
- 【笔记】《WebGL编程指南》学习-第1章WebGL概述
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(6-改变点的颜色))
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(5-通过鼠标点击画点)
- 【笔记】《WebGL编程指南》学习-第5章颜色与纹理(2-在矩形表面贴上图像))
- 《WebGL编程指南》学习笔记——3.在Canvas中使用WebGL
- 【笔记】《WebGL编程指南》学习-第3章绘制和变换三角形(2-你好三角形))
- 【笔记】《WebGL编程指南》学习-第5章颜色与纹理(2-彩色三角形)
- 【笔记】《WebGL编程指南》学习-第6章着色器语言(2-矢量和矩阵)
- 【笔记】《WebGL编程指南》学习-第7章进入三维世界(2-可视范围)
- 【笔记】《WebGL编程指南》学习-第8章光照(2-运动物体光照效果)
- 【笔记】《WebGL编程指南》学习-第9章层次模型(2-多节点模型)
- 【笔记】《WebGL编程指南》学习-第3章绘制和变换三角形(1-绘制多个点)
- 【笔记】《WebGL编程指南》学习-第6章着色器语言(1-基础)
- 【笔记】《WebGL编程指南》学习-第7章进入三维世界(1-视点和视线)
- Google 地图- 基本地图类型
- mysql 查询今天、昨天、上月、本月的数据
- Python3学习笔记1-2
- Hbase Java API 介绍及使用示例
- hql 写 sql
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(1-用canvas画一个蓝色矩形)
- lnmp环境分布式安装
- SQL Server 2008中的代码安全(七): Certificate 证书加密、对称密钥
- sys用户查看数据库表空间使用情况(ORACLE)
- python获取环境变量
- java实现excel文件上传,解析,导入
- Lintcode 41.最大子数组
- springmvc+shiro+maven 实现登录与权限授权
- border-image