浏览器未渲染JavaScript图形，直接显示代码的解决方法求助

问题根源 #

1. 浏览器直接打开.js文件会默认以纯文本格式展示内容，不会执行代码。
2. 你的代码使用了Node.js专属的require模块语法，浏览器原生不支持该语法，无法直接解析运行。

两种解决方法 #

方法一：用canvas-sketch自带预览命令运行

• 打开终端，切换到你的项目文件夹（包含sketch.js的目录）
• 执行命令：

  npx canvas-sketch sketch.js --open
  

  这条命令会启动本地开发服务器，自动在浏览器中打开预览页面，直接看到渲染好的蓝色矩形。

方法二：生成可直接打开的静态HTML文件

如果需要生成能双击打开的文件，执行以下步骤：

• 终端进入项目文件夹，执行命令：

  npx canvas-sketch sketch.js --build
  

• 执行完成后，项目目录下会生成dist文件夹，里面包含编译好的HTML和JS文件，双击该HTML文件即可在浏览器中看到图形。

内容的提问来源于stack exchange，提问作者Judith Lau