如何在VS Code或其他IDE中使用JavaScript绘制图形？

Code HS的绘图功能是平台封装了简化的绘图API（比如你熟悉的rect()、circle()这类内置函数），但本地环境没有这些预定义工具，直接照搬代码会报错。下面是两种可行的实现方案：

方案一：模拟Code HS的简化API（复用现有代码习惯） #

自己封装一套和Code HS逻辑一致的函数，基于HTML5 Canvas实现，不用大幅修改之前的代码：

1. 创建一个HTML文件（比如index.html），写入以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>Code HS Style Drawing</title>
    <style>
        canvas { border: 1px solid #000; }
    </style>
</head>
<body>
    <canvas id="drawingCanvas" width="400" height="400"></canvas>

    <script>
        // 获取Canvas绘图上下文
        const ctx = document.getElementById('drawingCanvas').getContext('2d');
        // 默认填充颜色
        let fillColor = 'black';

        // 模拟Code HS的fill()函数
        function fill(color) {
            fillColor = color;
            ctx.fillStyle = color;
        }

        // 模拟Code HS的rect()函数
        function rect(x, y, width, height) {
            ctx.fillRect(x, y, width, height);
        }

        // 模拟Code HS的circle()函数
        function circle(x, y, radius) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fill();
        }

        // 这里写你的绘图代码，和Code HS里的写法一致
        fill('blue');
        rect(50, 50, 100, 80);
        fill('red');
        circle(250, 200, 40);
    </script>
</body>
</html>

2. 在VS Code中安装Live Server插件，右键点击这个HTML文件，选择「Open with Live Server」，浏览器会自动打开页面并显示绘图效果。

方案二：直接使用原生Canvas API #

如果不需要模拟Code HS的API，也可以直接用原生Canvas绘图方法，示例如下：

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="400" height="400" style="border:1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        
        // 绘制矩形
        ctx.fillStyle = 'green';
        ctx.fillRect(30, 30, 120, 90);
        
        // 绘制圆形
        ctx.fillStyle = 'orange';
        ctx.beginPath();
        ctx.arc(250, 200, 50, 0, 2 * Math.PI);
        ctx.fill();
    </script>
</body>
</html>

常见问题排查 #

• 不要直接双击HTML文件打开（部分浏览器会限制本地JS运行权限），一定要用Live Server这类工具启动本地服务。
• 确保JS代码写在<canvas>元素之后，或者用DOMContentLoaded事件包裹代码，避免找不到Canvas元素。

内容的提问来源于stack exchange，提问作者Jay Jun