【WebGL连载教程四】H5开发3D引擎：认识Canvas之2D绘图篇

在Html5出现之前，如果你想在网页上显示图像，只能使用Html提供的原生方案<img>标签。

用这个标签图像虽然简单，但只能显示静态的图片，不能进行实时绘制和渲染。

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

HTML5 在当下，又被行业简称为H5。

使用H5技术开发制作的游戏，比如知名的有《大天使之剑H5》等等，这是一款基于canvas的2D游戏。

【1】在html中使用<canvas>标签:

<body>
    <canvas id='my-canvas' width='480' height='400'>
        对不起，您的浏览器未支持H5内容.
    </canvas>
</body>

像上面一样在body中进行定义，指定一个<canvas>标签，

id=’my-canvas‘，作用是它的名字。后边可以用javascrit通过id来找到它。

在<canvas></canvas>之间，里面的文本表示。当浏览器不支持<canvas>标签时会显示。

扫描二维码关注公众号，回复： 1007199 查看本文章

* 默认情况下，canvas标签是透明的。如果你不画些什么，你是看不到它的。

【2】在Html中调用加载Javascript脚本：

为了能在canvas上绘图，我们需要用到javascript代码。可以直接写在html中，也可以写成单独的js文件。

为了使代码简洁，便于阅读和管理。我们采用后边的一种方式，单独创建js文件。

在上一节，我们学习了如何使用ts文件来生成js，所以我们将使用ts来进行编写。

继续沿用上一节的代码，我们在html中的javascript调用了main.js，代码像下面这样。

<script type="text/javascript" src="js/Main.js"></script>

这个Main.js正是由我们上一节讲到的Main.ts生成的。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document</title> 
</head>

<body>
    <canvas id='my-canvas' width='480' height='400'>
        对不起，您的浏览器未支持H5内容.
    </canvas>
</body>

<script type="text/javascript" src="js/Main.js"></script>

</html>

* 注意，建议把script标签最好放在body之后执行。因为页面的加载顺序是从上到下的。

如果把<script>标签放在了<head>标签之间，当我们想通过id来获取canvas时，可能会得到null，

因为body还没有完成。另外，你可以把<script>标签放在<body>里面，但一定要放在<canvas>标签之后。

【3】在Javascript中获取到Canvas并绘制一个矩形：

在javascript获取Canvas也十分的简单，ts语言因为是js的超集，所以它提供了和原生js一样的方法。

我们在上一节的项目中，创建一个名称为：HelloCanvas.ts

输入以下内容：

namespace sunnyboxs{//namespace命名空间

    export class HelloCanvas{ //类名

        constructor() //构造函数
        {
            //通过元素id来获取对象
            var canvas:HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('my-canvas');
            if(!canvas){
                console.log("错误：无法获取到 Canvas 元素！");
                return;
            }

            //获取一个绘图上下文，这里我们的参数是：2d。表明我们绘制二维图形
            var context:CanvasRenderingContext2D = <CanvasRenderingContext2D>canvas.getContext("2d");
            //设置填充颜色为蓝色
            context.fillStyle='rgba(0,0,255,1.0)';
            //使用填充颜色填充矩形
            context.fillRect(120,10,150,150);

        }
    }
   
}

Document 对象：
当浏览器载入 HTML 文档, 它就会成为 document 对象。
document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
* 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

使用getElementById通过id来获取页面中的元素，这里我们是获取<canvas>的id名称my-canvas.

得到canvas后，我们获取一个上下文，通过参数2d指定我们想得到一个二维的绘图上下文。

然后，指定fillStyle要填充的颜色。调用fillRect画出一个矩形。

fillRect(x位置，y位置，宽度，高度)。

* 注意：在2d绘制上下文中，x和y的原点在canvas的左上角，x正方向往右，y正方向往下。

【4】在Main.ts中调用HelloCanvas.ts。

在Main.ts中，只需要new HelloCanvas()就可以了。前提是需要导入命名空间。

import HelloCanvas = sunnyboxs.HelloCanvas;
new HelloCanvas();

除此之外，你还可以这样写。效果一样，只是上面的写法更简短方便。

new sunnyboxs.HelloCanvas();

以下是Main.ts的全部内容：

运行我们上一节中提到的lite-server（它是一个基于npm的web服务器）.

在浏览器打开，看到运行的结果如下，在Canvas中画出了一个蓝色的矩形：

这节学习了如何调用Canvas的2D上下文绘制一个矩形。

最后提醒：

如果你编译后得到的Main.ts和HelloCanvas.ts类的依赖顺序提示发生了错误，

建议使用typescript-box编译器进行编译。它能实现正确的排序编译，解决ts中的引用错误。

具体教程在本博客：https://blog.csdn.net/sjt223857130/article/details/80086178

在下一节中，我们将使用Canvas的webgl来绘制图形。

欢迎关注~

【WebGL连载教程四】H5开发3D引擎：认识Canvas之2D绘图篇

猜你喜欢