推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 869 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，我想用 js 做一个 2048 ，要用到 canvas 库，因为我是新手，所以上手后才知道有 npm 和 cdn 两种引入库的方式，第一种还要用 webpack 打包，我就想先用 cdn 引入的方式测试一下。 结果不管怎么引用 spritejs 都无效，页面一片空白，processgingjs 也一样，用 fabricjs 画矩形倒是出现了一个框，但是没出现背景颜色。 代码都是官网上的例子或者 ai 生成我照抄的，我还把代码 cv 给 claude.ai 看了，它挑出几个无关紧要的错误，例如换 cdn 地址，方括号变花括号等等。 下面贴一个代码
<html lang="en"> <head><meta charset="UTF-8"> <meta name="viewport" cOntent="width=device-width, initial-scale=1.0"> <title>test</title> <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script> window.SpriteJS = spritejs; const canvas = new SpriteJS.Canvas({ container: document.body, width: 500, height: 500 }); const rect = new SpriteJS.Sprite(); rect.attr({ pos: [10, 10], size: [100, 100], bgcolor: 'red' }); canvas.append(rect); canvas.render(); </script>  | 1 okakuyang 2023-08-06 09:44:45 +08:00 你应该是找错版本了，现在这个库最新的版本是 3.x ，你这个可能是 1.x ，2.x 的写法。你可以去官网看看最新的写法。 |
 | 2 Yourshell 2023-08-06 09:47:04 +08:00 先学会用 devtools |
 | 3 Ace2003 OP |
 | 4 iOCZ 2023-08-06 10:29:20 +08:00 看看控制台有没有打印错误 |
 | 5 Rache1 2023-08-06 10:31:01 +08:00 你确定你按照文档来了？ 块元素 - SpriteJS ~ Next - 下一代 SpriteJS https://spritejs.com/#/zh-cn/block https://jsfiddle.net/tnjscqr4/ |
 | 6 darkengine 2023-08-06 10:37:36 +08:00 浏览器里 f12 点 console 看看有没有报错信息 |
 | 7 AyaseEri 2023-08-06 13:43:40 +08:00 1 是先看报错，2 是你确定你的代码是在 spritejs 加载完成之后执行的么 |
 | 8 bertonzh 2023-08-06 14:16:35 +08:00  2 编程第一步，要学会看报错信息。看报错信息的第一步，就是知道哪里有报错。 拿楼主的例子试了一下，很明显的 `SpriteJS.Canvas is not a constructor` 错误，但是楼主一个字都没说，显然是压根就没想过看报错信息。 不看报错信息是没办法写代码的。 |
| 9 okakuyang 2023-08-06 15:02:49 +08:00 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cOntent="width=device-width, initial-scale=1.0"> <title>test</title> <script src="https://unpkg.com/spritejs@3/dist/spritejs.js"></script> </head> <body> <div id="stage" style="width: 3080px;height:800px;"></div> <script> const {Scene, Sprite} = spritejs; // window.SpriteJS = spritejs; const cOntainer= document.body.querySelector('#stage'); const scene = new Scene({container, width: 3080, height: 800, mode: 'stickyTop'}); const layer = scene.layer(); const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png'); robot.attr({ anchor: [0, 0.5], pos: [0, 0], }); robot.animate([ {pos: [0, 0]}, {pos: [0, 300]}, {pos: [2700, 300]}, {pos: [2700, 0]}, ], { duration: 5000, iterations: Infinity, direction: 'alternate', }); layer.append(robot); </script> </body> </html> |
 | 10 lisongeee 2023-08-06 15:37:55 +08:00  spritejs 模块根本没有导出 Canvas 对象，而且官网根本就没有这个例子，好奇你看的哪个官网？ |
 | 11 learningman 2023-08-06 15:38:48 +08:00 via Android @lisongeee 这种不存在，但是又看起来很有道理的东西，十有八九 chatgpt |
Select Language