初学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