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

标签: webgl  canvas  2d  3d

在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>标签时会显示。

* 默认情况下,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来绘制图形。

欢迎关注~


原文链接:加载失败,请重新获取