JS页面出现stroke/strokeWeight未定义错误，求助解决方法

你写的stroke、strokeWeight、ellipse这些函数，还有mouseX、mouseY变量，都不是原生JavaScript自带的——它们是p5.js这个创意编程库的专属API，普通HTML页面不加载这个库的话，浏览器根本不知道这些东西是什么，自然会报“未定义”的错误。

解决步骤很简单：

• 第一步：在你的HTML文件里引入p5.js库
• 第二步：把代码放到p5.js的规范结构里

给你一个完整的可运行示例：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入p5.js库 -->
  <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
</head>
<body>
  <script>
    // setup函数是p5.js的初始化入口，只会执行一次
    function setup() {
      createCanvas(800, 600); // 创建一个画布，宽800高600
      stroke('green');
      strokeWeight(20);
      fill(0, 210, 247);
    }

    // draw函数会每秒自动执行约60次，用来做持续绘制/动画
    function draw() {
      ellipse(mouseX, mouseY, 30, 30);
    }
  </script>
</body>
</html>

补充几点：

• 原来的draw = function()写法也能用，但更推荐用function draw()的标准声明方式
• createCanvas是必须的，不然p5.js没有绘制的画布区域
• 初始化样式（stroke、fill这些）放在setup里就够了，不用每次draw都执行，性能更好

内容的提问来源于stack exchange，提问作者I dont know