初学VSCode，正好买了本《从0到1，HTML5 Canvas动画开发》，准备就在VSCode中把书里面的代码全敲一遍，今天就开个头。 首先是在ubuntu下创建一个Canvas_1_7的文件夹，然后在VSCode中使用文件->打开文件夹菜单选中该文件夹(本步是照着参考文献3来的)。 点击VSCode界面中的新建文件链接，创建一个匿名文件，然后点击右下角的纯文本链接，在弹出的选择语言模式中选择html。 在第一行输入叹号，然后按回车，VSCode会自动产生html基本框架。接着输入canvas示例代码，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>draw line</title> <script type="text/javascript"> window.onload=function() { var cnv=document.getElementById("canvas"); var cxt=cnv.getContext("2d"); cxt.moveTo(50,100); cxt.lineTo(150,50); cxt.stroke(); } </script> </head> <body> <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>文件编辑完成后，将文件保存为本地html文件。然后在VSCode中运行该文件。VSCode默认无法直接运行，需要安装扩展插件才行。根据参考文献5，需要在VSCode中安装open in browser 插件。在VSCode左侧的扩展中搜索并安装该插件。 插件安装完成后，在VSCode的html文档中点右键，选择“Open in Other Browsers”（在选择open in Default Browser要报错），然后在弹出的下拉框中选择Mozilla Firefox。 文件的运行效果如下图所示：
参考文献： [1]从0到1，HTML5 Canvas动画开发 [2]vscode新建html文件并快速生成标准的html代码,https://blog.csdn.net/caicai1171523597/article/details/88148417?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param [3]VSCode入门（一）怎样新建项目,https://blog.csdn.net/cillent_boy/article/details/93000602 [4]VSCode快捷键创建html5代码,https://fullstack.blog.csdn.net/article/details/102608178 [5]VS Code如何运行HTML文件？,https://jingyan.baidu.com/article/4853e1e5def1d15908f7263d.html
