为什么 cdn 引入的 canvas 库无效

2023-08-06 09:02:47 +08:00
 Ace2003

如题，我想用 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>
</head> <body> <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>
</body> </html> 就简单的画个矩形，但是打开后一片空白。 先打个预防针，有可能我的问题特别简单，但我只是个大一学生，暑假过完大二，想写个 2048 ，之前没有写过这么复杂的程序的经验
1964 次点击
所在节点    JavaScript
12 条回复
okakuyang
2023-08-06 09:44:45 +08:00
你应该是找错版本了，现在这个库最新的版本是 3.x ，你这个可能是 1.x ，2.x 的写法。你可以去官网看看最新的写法。
Yourshell
2023-08-06 09:47:04 +08:00
先学会用 devtools
Ace2003
2023-08-06 10:07:57 +08:00
我用了 spritejs.com 的例子也无效
@okakuyang
iOCZ
2023-08-06 10:29:20 +08:00
看看控制台有没有打印错误
Rache1
2023-08-06 10:31:01 +08:00
你确定你按照文档来了？

块元素 - SpriteJS ~ Next - 下一代 SpriteJS https://spritejs.com/#/zh-cn/block

https://jsfiddle.net/tnjscqr4/
darkengine
2023-08-06 10:37:36 +08:00
浏览器里 f12 点 console 看看有没有报错信息
AyaseEri
2023-08-06 13:43:40 +08:00
1 是先看报错，2 是你确定你的代码是在 spritejs 加载完成之后执行的么
bertonzh
2023-08-06 14:16:35 +08:00
编程第一步，要学会看报错信息。看报错信息的第一步，就是知道哪里有报错。
拿楼主的例子试了一下，很明显的 `SpriteJS.Canvas is not a constructor` 错误，但是楼主一个字都没说，显然是压根就没想过看报错信息。

不看报错信息是没办法写代码的。
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>
lisongeee
2023-08-06 15:37:55 +08:00
![img]( https://user-images.githubusercontent.com/38517192/258628317-f063678d-0dcf-4b0e-8ee3-304fdaa49ecc.png)

spritejs 模块根本没有导出 Canvas 对象，而且官网根本就没有这个例子，好奇你看的哪个官网？
learningman
2023-08-06 15:38:48 +08:00
@lisongeee 这种不存在，但是又看起来很有道理的东西，十有八九 chatgpt
Ace2003
2023-08-06 18:18:23 +08:00
@okakuyang 这位老哥的代码能运行，我研究一下

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/962738

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX