【笔记】《WebGL编程指南》学习-第2章WebGL入门(1-用canvas画一个蓝色矩形)_canvas画蓝色背景框

作者：凡人多烦事01 | 2024-03-29 00:39:45

踩

canvas画蓝色背景框

这一章开始，就要按照书上教的来敲一敲代码了，要准备的很简单：

编辑器（我用的是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
2
3
4
5
6
7
8
9
10
11
12
13
14

解析：

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);  //使用填充颜色填充矩形
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

下面我们要对照上面的步骤依次看看

获取<canvas>元素

 var canvas = document.getElementById("example");
    if(!canvas){
        console.log("Failed to retrieve the <canvas> element");
        return;
    }1
2
3
4
5

为了在<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");1

canvas.getContext(）方法的参数制定了上下文的类型（二维或三维）。在本例中，如果你想绘制二维图形，就必须制定为2d（小写）。

这一行的执行结果就是绘图上下文被存储到了 ctx 变量中待使用。（这里省略了错误检查）

使用上下文支持的方法来绘制二维图形

绘制蓝色矩形的代码分为两步：
1. 在绘图时设置要使用的颜色
2. 用这个颜色绘制矩形

 ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; //设置填充颜色为蓝色
 ctx.fillRect(120,10,150,150);  //使用填充颜色填充矩形1
2

这只颜色的字符串 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文件就可以得到下面的画面（撒花~~）
这里写图片描述

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】