在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来绘制图形。
欢迎关注~