《TypeScript图形渲染实战：2D架构设计与实现》 —1.2.4 第一个TypeScript程序
1.2.4 第一个TypeScript程序
作为本书的第一个Demo，我们使用TypeScript构建一个简单的Web应用程序：使用Canvas2D居中绘制Hello World。
首先在桌面上单击右键，在弹出的菜单中选择新建文件夹选项，命名为HelloWorld。然后将新建的文件夹拖曳到程序坞中的VS Code图标上，启动VS Code应用程序。单击新建文件按钮，创建一个名为index.html的文件，如图1.11所示。
图1.11 新建index.html文件
接着打开index.html文件，使用Shift + Ctrl + P快捷方式打开命令面板，在输入框中输入insert snippet命令后，会出现“插入代码片段”的命令，如图1.12所示。
图1.12 使用VS Code的插入代码片段功能
选择“插入代码片段”命令后再选择html，就会自动生成如下HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
<title> Page Title </title>
<meta name = "viewport" content = "width=device-width,initial-scale=1" >
<link rel = "stylesheet" type = "text/css" media = "screen" href =
"main.css" />
<script src = "main.js"> </script>
</head>
<body>
</body>
</html>
将<title>标签中的文本内容替换为Hello World， <link>和<script>标签内容保持不变，后续会使用TypeScrip Compiler生成main.js源文件。
在VS Code中创建一个名为main.css的文件，输入如下代码：
/*
CSS选择器：# 表示ID选择器
*/
#canvas {
background : #ffffff ;
margin-left : 10px ;
margin-top : 10px ;
-webkit-box-shadow : 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;
-moz-box-shadow : 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;
box-shadow ： 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;
}
注意：CSS中仅可以使用/* */进行注释。
在VS Code中创建一个名为main.ts的文件，输入如下代码：
class Canvas2DUtil {
//声明public访问级别的成员变量
public context : CanvasRenderingContext2D ;
// public访问级别的构造函数
public constructor ( canvas : HTMLCanvasElement ) {
this . context = canvas . getContext ( "2d" ) ;
}
// public访问级别的成员函数
public drawText ( text : string ) : void {
// Canvas2D和webGL这种底层绘图API都是状态机模式
//每次绘制前调用save将即将要修改的状态记录下来
//每次绘制后调用restore将已修改的状态丢弃，恢复到初始化时的状态
//这样的好处是状态不会混乱
//假设当前绘制文本使用红色，如果你没有使用save/restore配对函数的话
//则下次调用其他绘图函数时，如果你没更改颜色，则会继续使用上次设置的红色进行绘制
//随着程序越来越复杂，如不使用save/restore来管理，最后整个渲染状态会极其混乱
//请时刻保持使用save / restore配对函数来管理渲染状态
this . context . save ( ) ;
//让要绘制的文本居中对齐
this . context . textBaseline = "middle" ;
this . context . textAlign = "center" ;
//计算canvas的中心坐标
let centerX : number = this . context . canvas . width * 0.5 ;
let centerY : number = this . context . canvas . height * 0.5 ;
//红色填充
// this . context . fillStyle = " red " ;
//调用文字填充命令
this . context . fillText ( text , centerX , centerY ) ;
//绿色描边
this . context . strokeStyle = "green";
//调用文字描边命令
this . context . strokeText ( text , centerX , centerY ) ;
//将上面context中的textAlign，extBaseLine，fillStyle，strokeStyle
状态恢复到初始化状态
this . context . restore ( ) ;
}
}
接下来调用Canvas2DUtil类，绘制居中对齐的文字。具体代码如下：
let canvas : HTMLCanvasElement | null = document . getElementById ('canvas')
as HTMLCanvasElement ;
if ( canvas === null ) {
alert ( "无法获取HTMLCanvasElement !!! " ) ;
throw new Error ( "无法获取HTMLCanvasElement !!! " ) ;
}
let canvas2d : Canvas2DUtil = new Canvas2DUtil ( canvas ) ;
canvas2d . drawText ( "Hello World" ) ;
选择“查看|集成终端”菜单项（或使用Ctrl+`快捷键）打开集成终端面板，使用tsc命令将TS代码编译（转译）成JS代码：
tsc main.ts
当按回车键后会发现VS Code左侧的资源管理中多了一个名为main.js的文件，如图1.13所示，该main.js文件就是使用main.ts编译（转译）后的结果。
图1.13 通过tsc命令将TS文件转译成JS文件
接下来，在index.html中的body标签对内声明一个canvas标签，代码如下：
<body>
<canvas id = "canvas" width = "800" height = "600" > </canvas>
</body>
该canvas标签的ID名称必须和main.css中的CSS ID选择器名称一致，这样才能使#canvas中设置的CSS属性生效。
接着使用canvas元素的width / height属性进行尺寸设置，当前设置的尺寸是800×600像素。如果没有设置canvas元素的width / height属性，默认情况下，浏览器所创建的canvas元素是300像素宽，150像素高。
为了能够方便地运行HTML文件，引入一个名为open in browser的VS Code扩展插件。请单击VS Code最左侧的活动栏中的扩展图标（或使用Shift + Ctrl + X快捷键）打开扩展面板，输入Open in Browser后下载安装，如图1.14所示。
安装完Open in Browser插件后，在VS Code中定位到HTML文件处，单击右键显示上下文菜单，即可使用该扩展，如图1.15所示。
其中，Open In Default Browser（Alt + B快捷键）可直接在默认的浏览器中运行HTML文件。而Open in Other Browsers（Shift + Alt + B快捷键）则显示如图1.16所示面板，可以选择想要运行的浏览器。
图1.14 从VS Code 应用商店下载安装插件
图1.15 使用Open in Browser插件
图1.16 Mac OS X 中可运行的浏览器
当运行index.html文件时可能会出现运行页面出错提示，如图1.17所示。
图1.17 运行页面出错
之所以出现这个问题，是浏览器解析标签顺序导致的。参考上面的index.html代码，会发现script标签在canvas标签前面，浏览器解析HTML时，先遇到script标签，就去下载script标签中的main.js脚本，然后开始运行这段脚本，此时脚本中引用的canvas元素实际并没有解析完成，因此会弹出“无法获取HTMLCanvasElement”提示。
有两种修改代码方式来解决这个问题，第一种修改方式是将script标签放到canvas标签后面。具体代码如下：
<body>
<canvas id = "canvas" width = "800" height = "600" > </canvas>
<script src = "main.js" > </script>
</body>
第二种方式不用调整代码顺序，仍旧让script放在<head> </head>中，并使用defer属性。具体代码如下：
<head>
<script src = "main.js" defer > </script>
</head>
defer属性会让脚本的执行延迟到整个文档加载后再运行，这样就能避免上面遇到的问题。
修正了上述问题后，继续运行Open In Default Browser命令，程序正常运行，文字居中绘制，具体效果如图1.18所示。
图1.18 Hello World居中绘制
- 点赞
- 收藏
- 关注作者
评论（0）