《WebGL编程指南》学习笔记——2.使用< canvas >元素

上一节初步认识了WebGL，这一小节我们来开始学习使用< canvas >元素绘制二维图形

WebGL编程指南学习笔记2使用 canvas 元素
- 认识 canvas 标签
- 使用 canvas 标签
- HelloCanvas2d实例
  - 获取 canvas 元素
  - 通过元素来获取二维图形的绘图上下文
  - 绘制二维图形

下小节我们正式开始学习如何在< canvas >中使用WebGL

WebGL采用HTML5中新引入的元素，它定义了网页上的绘图区域，如果没有WebGL，JS只能在上绘制二维图形，有了WebGL，就可以在上面绘制三维图形了。

认识< canvas >标签

　　HTML5出现以前，如果你想在网页上显示图像，只能使用HTML提供的原生方案标签。用这个标签显示图像虽然简单，但只能显示静态的图片，不能进行实时绘制和渲染。因为，后来出现了一些第三方解决方案，如Flash Player等。

　　HTML5的出现改变了一切，它引入了< canvas >标签，允许JS动态地绘制图形。

　　艺术家们将画布（canvas译为”画布”）作为绘画的地方，类似地，< canvas >标签定义了网页上的绘图区域。有了< canvas >，你就可以使用JS绘制任何你想画的东西。< canvas >提供一些简单的会凸函数，用来描绘点、线、矩形、圆等。

使用< canvas >标签

　　为了在< canvas >上绘制二维图形，需经过以下几个步骤：

创建标签，指定绘图范围。
利用JavaScript获取到标签。
向该标签请求二维图形的“绘图上下文”。
使用绘图上下文调用相应的绘图函数，绘制二维图形。

HelloCanvas2d实例

　　下面是HelloCanvas2d实例，我们利用< canvas >画个矩形，并用红色填充
此系列我编写的源码都可以在我的github下载到：https://github.com/hushhw/WebGL-Programming-Guide/tree/master/00HelloCanvas2d

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><title>Clear canvas</title>
</head><body onload="main()"><canvas id="mycanvas" width="400" height="400">Please use the browser supporting "canvas"</canvas><script src="HelloCanvas2d.js"></script>
</body>
</html>

//HelloCanvas2d.js
function main() {//获取<canvas>标签var canvas = document.getElementById("mycanvas");//如果没找到<canvas>标签，则输出错误信息if (!canvas) {console.log('Failed to retrieve the <canvas> element.');return;}//要在<canvas>上绘制图像，须先获取绘图上下文，“2d”代表我们要绘制二维图形。var ctx = canvas.getContext("2d");//fillstyle：设置或返回用于填充绘画的颜色、渐变或模式；这里我们设置填充颜色为红色。ctx.fillStyle = "red";/*使用填充颜色填充矩形。fillRect(x,y,width,height)x    矩形左上角的 x 坐标y    矩形左上角的 y 坐标width        矩形的宽度height   矩形的高度*/ctx.fillRect(120, 10, 150, 150);
}

获取< canvas >元素

//获取<canvas>标签var canvas = document.getElementById("mycanvas");//如果没找到<canvas>标签，则输出错误信息if (!canvas) {console.log('Failed to retrieve the <canvas> element.');return;}

　　在HTML文件中通过JS程序获取< canvas >元素。可以使用document.getElementById 的函数来获取。这个方法只有一个参数，就是HTML文件中< canvas >标签的 id 属性
　　

通过元素来获取二维图形的绘图上下文

//要在<canvas>上绘制图像，须先获取绘图上下文，“2d”代表我们要绘制二维图形。var ctx = canvas.getContext("2d");

　　< canvas >元素可以同时支持二维图形和三维图形，它不直接提供绘图方法，而是提供一种叫上下文的机制来绘图。
　　
　　在上述代码中，canvas.getContext() 方法的参数制订了上下文的类型（二维或三维）。如果你想要绘制二维图形，就必须指定为2d（区分大小写）。
　　
　　

绘制二维图形

//fillstyle：设置或返回用于填充绘画的颜色、渐变或模式；这里我们设置填充颜色为红色。ctx.fillStyle = "red";/*使用填充颜色填充矩形。fillRect(x,y,width,height)x    矩形左上角的 x 坐标y    矩形左上角的 y 坐标width        矩形的宽度height   矩形的高度*/ctx.fillRect(120, 10, 150, 150);

　　< canvas >的坐标系横轴为x轴（正方向朝右），纵轴为y轴（正方向朝下）。原点（0，0）在左上方。fillRect方法中设置的x，y指的是从坐标的开始算，右移x像素，下移y像素的位置，就是矩形左上角的位置。如图所示：
　　

文章内容借鉴于：
《WebGL编程指南》
http://www.cnblogs.com/mirror-pc/p/4179062.html
http://blog.csdn.net/weixin_40282619/article/details/78019085