在Ubuntu中用VSCode创建简单canvas示例

最新推荐文章于 2024-03-12 22:33:59 发布

gc_2299

最新推荐文章于 2024-03-12 22:33:59 发布

阅读量611

点赞数 1

分类专栏：网页编程文章标签： Ubuntu VSCode canvas html5

本文链接：https://blog.csdn.net/gc_2299/article/details/108957126

版权

网页编程专栏收录该内容

148 篇文章 11 订阅

订阅专栏

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