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代码：
Page Title "main.css" />
将
标签中的文本内容替换为Hello World， <link>和<script>标签内容保持不变，后续会使用TypeScrip Compiler生成main.js源文件。</p><p>在VS Code中创建一个名为main.css的文件，输入如下代码：</p><p>/*</p><p>CSS选择器：# 表示ID选择器</p><p>*/</p><p>#canvas {</p><p>background : #ffffff ;</p><p>margin-left : 10px ;</p><p>margin-top : 10px ;</p><p>-webkit-box-shadow : 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;</p><p>-moz-box-shadow : 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;</p><p>box-shadow ： 4px 4px 8px rgba ( 0 , 0 , 0 , 0.5 ) ;</p><p>}</p><p>注意：CSS中仅可以使用/* */进行注释。</p><p>在VS Code中创建一个名为main.ts的文件，输入如下代码：</p><p>class Canvas2DUtil {</p><p>//声明public访问级别的成员变量</p><p>public context : CanvasRenderingContext2D ;</p><p>// public访问级别的构造函数</p><p>public constructor ( canvas : HTMLCanvasElement ) {</p><p>this . context = canvas . getContext ( "2d" ) ;</p><p>}</p><p>// public访问级别的成员函数</p><p>public drawText ( text : string ) : void {</p><p>// Canvas2D和webGL这种底层绘图API都是状态机模式</p><p>//每次绘制前调用save将即将要修改的状态记录下来</p><p>//每次绘制后调用restore将已修改的状态丢弃，恢复到初始化时的状态</p><p>//这样的好处是状态不会混乱</p><p>//假设当前绘制文本使用红色，如果你没有使用save/restore配对函数的话</p><p>//则下次调用其他绘图函数时，如果你没更改颜色，则会继续使用上次设置的红色进行绘制</p><p>//随着程序越来越复杂，如不使用save/restore来管理，最后整个渲染状态会极其混乱</p><p>//请时刻保持使用save / restore配对函数来管理渲染状态</p><p>this . context . save ( ) ;</p><p>//让要绘制的文本居中对齐</p><p>this . context . textBaseline = "middle" ;</p><p>this . context . textAlign = "center" ;</p><p>//计算canvas的中心坐标</p><p>let centerX : number = this . context . canvas . width * 0.5 ;</p><p>let centerY : number = this . context . canvas . height * 0.5 ;</p><p>//红色填充</p><p>// this . context . fillStyle = " red " ;</p><p>//调用文字填充命令</p><p>this . context . fillText ( text , centerX , centerY ) ;</p><p>//绿色描边</p><p>this . context . strokeStyle = "green";</p><p>//调用文字描边命令</p><p>this . context . strokeText ( text , centerX , centerY ) ;</p><p>//将上面context中的textAlign，extBaseLine，fillStyle，strokeStyle</p><p>状态恢复到初始化状态</p><p style="text-align:center"><img src="https://www.huoban.com/news/zb_users/cache/ly_autoimg/m/MTY4NjM.jpg" alt="《TypeScript图形渲染实战：2D架构设计与实现》 —1.2.4 第一个TypeScript程序" title="《TypeScript图形渲染实战：2D架构设计与实现》 —1.2.4 第一个TypeScript程序" /></p><p>this . context . restore ( ) ;</p><p>}</p><p>}</p><p>接下来调用Canvas2DUtil类，绘制居中对齐的文字。具体代码如下：</p><p>let canvas : HTMLCanvasElement | null = document . getElementById ('canvas')</p><p>as HTMLCanvasElement ;</p><p>if ( canvas === null ) {</p><p>alert ( "无法获取HTMLCanvasElement !!! " ) ;</p><p>throw new Error ( "无法获取HTMLCanvasElement !!! " ) ;</p><p>}</p><p>let canvas2d : Canvas2DUtil = new Canvas2DUtil ( canvas ) ;</p><p>canvas2d . drawText ( "Hello World" ) ;</p><p>选择“查看|集成终端”菜单项（或使用Ctrl+`快捷键）打开集成终端面板，使用tsc命令将TS代码编译（转译）成JS代码：</p><p>tsc main.ts</p><p>当按回车键后会发现VS Code左侧的资源管理中多了一个名为main.js的文件，如图1.13所示，该main.js文件就是使用main.ts编译（转译）后的结果。</p><p>图1.13 通过tsc命令将TS文件转译成JS文件</p><p>接下来，在index.html中的body标签对内声明一个canvas标签，代码如下：</p><p><body></p><p><canvas id = "canvas" width = "800" height = "600" > </canvas></p><p></body></p><p>该canvas标签的ID名称必须和main.css中的CSS ID选择器名称一致，这样才能使#canvas中设置的CSS属性生效。</p><p>接着使用canvas元素的width / height属性进行尺寸设置，当前设置的尺寸是800×600像素。如果没有设置canvas元素的width / height属性，默认情况下，浏览器所创建的canvas元素是300像素宽，150像素高。</p><p>为了能够方便地运行HTML文件，引入一个名为open in browser的VS Code扩展插件。请单击VS Code最左侧的活动栏中的扩展图标（或使用Shift + Ctrl + X快捷键）打开扩展面板，输入Open in Browser后下载安装，如图1.14所示。</p><p>安装完Open in Browser插件后，在VS Code中定位到HTML文件处，单击右键显示上下文菜单，即可使用该扩展，如图1.15所示。</p><p>其中，Open In Default Browser（Alt + B快捷键）可直接在默认的浏览器中运行HTML文件。而Open in Other Browsers（Shift + Alt + B快捷键）则显示如图1.16所示面板，可以选择想要运行的浏览器。</p><p>图1.14 从VS Code 应用商店下载安装插件</p><p>图1.15 使用Open in Browser插件</p><p>图1.16 Mac OS X 中可运行的浏览器</p><p>当运行index.html文件时可能会出现运行页面出错提示，如图1.17所示。</p><p>图1.17 运行页面出错</p><p>之所以出现这个问题，是浏览器解析标签顺序导致的。参考上面的index.html代码，会发现script标签在canvas标签前面，浏览器解析HTML时，先遇到script标签，就去下载script标签中的main.js脚本，然后开始运行这段脚本，此时脚本中引用的canvas元素实际并没有解析完成，因此会弹出“无法获取HTMLCanvasElement”提示。</p><p>有两种修改代码方式来解决这个问题，第一种修改方式是将script标签放到canvas标签后面。具体代码如下：</p><p><body></p><p><canvas id = "canvas" width = "800" height = "600" > </canvas></p><p><script src = "main.js" > </script></p><p></body></p><p>第二种方式不用调整代码顺序，仍旧让script放在<head> </head>中，并使用defer属性。具体代码如下：</p><p><head></p><p><script src = "main.js" defer > </script></p><p></head></p><p>defer属性会让脚本的执行延迟到整个文档加载后再运行，这样就能避免上面遇到的问题。</p><p>修正了上述问题后，继续运行Open In Default Browser命令，程序正常运行，文字居中绘制，具体效果如图1.18所示。</p><p>图1.18 Hello World居中绘制</p><p>TypeScript HTML 渲染 架构设计</p><p>
<strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong>
</p></div>
<div class="article_footer clear">
<div class="fr tag">标签：<a href="https://www.huoban.com/news/tags-1738.html">TypeScript</a>
<a href="https://www.huoban.com/news/tags-1739.html">图形</a>
<a href="https://www.huoban.com/news/tags-442.html">渲染</a>
<a href="https://www.huoban.com/news/tags-233.html">实战</a>
</div>
<div class="bdsharebuttonbox fl share">
<div class="share-widget fl">
<div class="social-share" data-sites="wechat,weibo, qq, qzone"></div>
</div>
</div>
</div>
<!-- 广告位ad4 -->
<div class="post-navigation clear">
<div class="post-previous fl">
<span>上一篇:</span><a href="https://www.huoban.com/news/post/16862.html">C语言内存泄露很严重，如何应对？</a>
</div>
<div class="post-next fr">
<span>下一篇:</span><a href="https://www.huoban.com/news/post/16864.html">张小白教你如何在Ununtu 18.04上源码安装MindSpore Lite V1.1.0</a>
</div>
</div>
</div>
<div class="related_article">
<div class="box_title clear">
<span><i class="icon fa fa-paper-plane"></i>相关文章</span>
</div>
<div class="related_list clear">
<article class="fl">
<div class="related_img"><a href="https://www.huoban.com/news/post/76299.html"><img src="https://www.huoban.com/news/zb_users/upload/2022/08/20220822220500_15113.png"></a></div>
<div class="related_detail">
<h3><a href="https://www.huoban.com/news/post/76299.html" title="自选图为什么不能自选（选不出来可以不选图）">自选图为什么不能自选（选不出来可以不选图）</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>586</span>
<span><i class="fa fa-clock-o"></i>2022-05-30</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.huoban.com/news/post/76077.html"><img src="https://www.huoban.com/news/zb_users/upload/2022/08/20220822033500_26336.png"></a></div>
<div class="related_detail">
<h3><a href="https://www.huoban.com/news/post/76077.html" title="怎样把图片转正（怎样将照片转正）">怎样把图片转正（怎样将照片转正）</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>586</span>
<span><i class="fa fa-clock-o"></i>2022-05-30</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.huoban.com/news/post/75963.html"><img src="https://www.huoban.com/news/zb_users/upload/2022/08/20220821181500_30066.png"></a></div>
<div class="related_detail">
<h3><a href="https://www.huoban.com/news/post/75963.html" title="怎么设置旋转效果？（怎么做才能有旋转效果）">怎么设置旋转效果？（怎么做才能有旋转效果）</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>586</span>
<span><i class="fa fa-clock-o"></i>2022-05-30</span>
</div>
</div>
</article>
</div>
</div>
<!--<p class="comment-disable sb br mb"><i class="iconfont icon-cry"></i>抱歉，评论功能暂时关闭!</p>-->
</div>
</div>
<div class="sidebar">
<div id="推荐文章" class="part clear 推荐文章">
<div class="top">
<h3 class="title">推荐文章</h3>
</div>
<div class="side 推荐文章"><ul><ul class="hot_posts"> <li><h4><a href="https://www.huoban.com/news/post/132763.html" title="企业生产管理是什么，企业生产管理软件">企业生产管理是什么，企业生产管理软件</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/136160.html" title="盘点进销存软件排行榜前十名">进盘点进销存软件排行榜前十名</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132779.html" title="进销存系统哪个简单好用？进销存系统优点">进销存系统哪个简单好用？进销存系统优点</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/133648.html" title="工厂生产管理（工厂生产管理流程及制度）">工厂生产管理（工厂生产管理流程及制度）</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132780.html" title="生产管理软件，机械制造业生产管理，制造业生产过程管理软件">生产管理软件，机械制造业生产管理，制造业生产过程管理软件</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132776.html" title="进销存软件和ERP有什么区别？进销存与erp软件理解">进销存软件和ERP有什么区别？进销存与erp软件理解</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132974.html" title="进销存如何进行库存管理">进销存如何进行库存管理</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132269.html" title="excel销售订单管理系统（销售订单录入系统）">如何利用excel制作销售订单管理系统？</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/136946.html" title="数据库订单管理系统有哪些功能？数据库订单管理系统怎么设计？">数据库订单管理系统有哪些功能？数据库订单管理系统怎么设计？</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132312.html" title="数据库订单管理系统（订单系统数据流图）">什么是数据库管理系统？</a></h4></li></ul></ul></div>
</div>
<div id="divPrevious" class="part clear previous">
<div class="top">
<h3 class="title">最近发表</h3>
</div>
<div class="side divPrevious"><ul><li><a title="掌握excel固定单元格技巧，让数据管理更高效" href="https://www.huoban.com/news/post/157761.html">掌握excel固定单元格技巧，让数据管理更高效</a></li>
<li><a title="如何通过设置Excel行距提升工作表可读性和美观度" href="https://www.huoban.com/news/post/157760.html">如何通过设置Excel行距提升工作表可读性和美观度</a></li>
<li><a title="掌握excel线性回归技巧助力数据分析与决策优化" href="https://www.huoban.com/news/post/157759.html">掌握excel线性回归技巧助力数据分析与决策优化</a></li>
<li><a title="掌握excel如何画折线图让数据分析更高效" href="https://www.huoban.com/news/post/157758.html">掌握excel如何画折线图让数据分析更高效</a></li>
<li><a title="确保Excel文档安全的有效加密策略和方法" href="https://www.huoban.com/news/post/157757.html">确保Excel文档安全的有效加密策略和方法</a></li>
<li><a title="如何轻松取消Excel中的分页提升数据展示效果" href="https://www.huoban.com/news/post/157756.html">如何轻松取消Excel中的分页提升数据展示效果</a></li>
<li><a title="在Excel中锁定表头的简单步骤如何提升数据管理效率？" href="https://www.huoban.com/news/post/157755.html">在Excel中锁定表头的简单步骤如何提升数据管理效率？</a></li>
<li><a title="Excel制作柱状图的简单步骤和实用技巧" href="https://www.huoban.com/news/post/157753.html">Excel制作柱状图的简单步骤和实用技巧</a></li>
<li><a title="掌握Excel绝对引用技巧，轻松提升数据处理效率" href="https://www.huoban.com/news/post/157752.html">掌握Excel绝对引用技巧，轻松提升数据处理效率</a></li>
<li><a title="掌握excel如何批量查找以提升工作效率的实用技巧" href="https://www.huoban.com/news/post/157751.html">掌握excel如何批量查找以提升工作效率的实用技巧</a></li>
</ul></div>
</div>
<div id="sidebar_ad" class="part clear sidebar_ad">
<div class="part sidebar_ad"><div class="active"><a href='https://mrhnug.r.huobanbot.com/wxwork/pub/landings/426?app_id=1960&company_id=54&corp_id=wwbd4b7b6e7b0ccdaa&app_company_id=1' target='_blank'><img style='width:100%;height:100%' src='https://www.huoban.com/news/zb_users/upload/2023/08/erwei3.jpg'></a><br>
<a href='https://www.huoban.com/crm.html?utm=jiasouadv' target='_blank'><img style='width:100%;height:100%' src='https://www.huoban.com/news/zb_users/upload/2023/03/20230321171645167939020583758.png'></a><br>
</div></div>
</div>
<div id="hot_posts" class="part clear hot_posts">
<div class="top">
<h3 class="title">热评文章</h3>
</div>
<ul class="hot_posts"><li><h4><a href="https://www.huoban.com/news/post/104011.html" title="零代码开发是什么？2022低代码平台排行榜">零代码开发是什么？2022低代码平台排行榜</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/131019.html" title="智能进销存库存管理系统（智慧进销存）">智能进销存库存管理系统（智慧进销存）</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/73907.html" title="在线文档哪家强？8款在线文档编辑软件推荐">在线文档哪家强？8款在线文档编辑软件推荐</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/102663.html" title="WPS2016怎么绘制简单的价格表?">WPS2016怎么绘制简单的价格表?</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/76010.html" title="用在线电子表格，居家办公更轻松">用在线电子表格，居家办公更轻松</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/148830.html" title="定制订单管理系统（为特定需求定制的订单管理系统）">定制订单管理系统（为特定需求定制的订单管理系统）</a></h4></li></ul> </div>
<div id="divLinkage" class="part clear link">
<div class="top">
<h3 class="title">友情链接</h3>
</div>
<div class="side divLinkage"><ul><li class="link-item"><a href="https://www.huoban.com/" target="_blank" title="伙伴云">伙伴云</a></li><li class="link-item"><a href="https://www.huoban.com/news/category-19.html" title="进销存管理">进销存管理</a></li><li class="link-item"><a href="https://www.huoban.com/news/category-3.html" title="低代码">低代码</a></li><li class="link-item"><a href="https://www.huoban.com/news/tags-12.html" target="_blank" title="Excel表格">Excel表格</a></li></ul></div>
</div> </div>
</div>
</section>
</div>
<footer class="p-footer">
<div class="contant_box">
<div class="discover_tmt">
<h5 class="">伙伴云</h5>
<div class="text_box">
<a href="https://jiasou.cn/" title="2B数字化营销SEO">加搜toBSEO</a>
<a href="https://www.finclip.com/news/category-1.html" title="小程序工具">前端框架</a>
<a href="https://www.jia-ai.com/info/" title="小红书营销攻略">小红书营销攻略</a>
<a href="https://www.yanyin.tech/cms/" title="生物研究资讯">生物研究资讯</a>
</div> </div>
<div class="collaboration_box">
</div>
<div class="we_img_box clear">
<div class="img_box">
<img src="https://www.huoban.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt">
</div>
</div>
</div>
<p class="info"> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">京ICP备12038259号</a>
<span>
<a href="#"></a></span>
</p>
</footer>
<div id="backtop" class="backtop">
<div class="bt-box top">
<i class="fa fa-angle-up fa-2x"></i>
</div>
</div>
<script charset="UTF-8" src="https://www.huoban.com/assets/js/sensorsdata.1.22.2.min.js"></script>
<script charset="UTF-8">
var sensors = window['sensorsDataAnalytic201505'];
sensors.init({
server_url: 'https://saapi.huoban.com/sa?project=production',
heatmap:{scroll_notice_map:'not_collect'},
use_client_time:true,
send_type:'beacon'
});
sensors.quick('autoTrack');
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6444c045836d6bf27124085a4f62c2a8";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(()=>{const e="https://analyze.jiasou.cc/api/v1/page_view/report/",n="9fe06d4884e0461caaa1de5651164d43";let t=null;const o=new Proxy({},{get:(e,n)=>localStorage.getItem(window.btoa(n)),set:(e,n,t)=>!!t&&(localStorage.setItem(window.btoa(n),t),!0)});new Promise((t=>{if(o.fingerprint)t();else{const a=function(){var e={};if(e.userAgent=navigator.userAgent||"",e.plugins=[],navigator.plugins&&navigator.plugins.length>0)for(var n=0;n<navigator.plugins.length;n++){var t={name:navigator.plugins[n].name||"",filename:navigator.plugins[n].filename||"",description:navigator.plugins[n].description||""};e.plugins.push(t)}e.languages=navigator.languages||[navigator.language||""],e.timezone=(new Date).getTimezoneOffset(),e.screenResolution={width:window.screen.width||0,height:window.screen.height||0,pixelDepth:window.screen.pixelDepth||0,colorDepth:window.screen.colorDepth||0};var o=document.createElement("canvas").getContext("2d"),a=[],i=["monospace","sans-serif","serif"];for(n=0;n<i.length;n++){var r=i[n];o.font="12px "+r,o.measureText("abcdefghijklmnopqrstuvwxyz0123456789").width>0&&a.push(r)}return e.fonts=a,e.cookieEnabled=navigator.cookieEnabled||!1,e.localStorage=void 0!==window.localStorage,e.sessionStorage=void 0!==window.sessionStorage,e.doNotTrack="1"===navigator.doNotTrack||"1"===window.doNotTrack||"1"===navigator.msDoNotTrack||"yes"===navigator.doNotTrack,e}();fetch(`${e}u/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:n,f:window.btoa(JSON.stringify(a))})}).then((e=>{console.debug("browser fingerprint sent"),200===e.status&&e.json().then((e=>{console.debug("browser fingerprint received",e),o.fingerprint=e.fp,t()}))}))}})).then((()=>{e&&o.fingerprint&&fetch(e+`?${new URLSearchParams({token:n}).toString()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({c:window.btoa(JSON.stringify({u:o.fingerprint,l:window.location.href,r:document.referrer}))})}).then((e=>{200==e.status&&e.json().then((e=>{e.track_id&&(t=e.track_id)}))}))})),window.addEventListener("beforeunload",(async n=>{t&&fetch(e+`?${new URLSearchParams({track_id:t}).toString()}`,{method:"GET",headers:{"Content-Type":"text/plain"},keepalive:!0}),n.returnValue=""}))})();
</script><script language="javascript" src="https://www.huoban.com/news/zb_users/plugin/ZF_ad/js/index.js?id=273"></script>
<script language="javascript" src="https://www.huoban.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script>
</body>
</html>
<!--870.16 ms , 17 queries , 3678kb memory , 0 error-->
