为什么 cdn 引入的 canvas 库无效

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 511 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题，我想用 js 做一个 2048 ，要用到 canvas 库，因为我是新手，所以上手后才知道有 npm 和 cdn 两种引入库的方式，第一种还要用 webpack 打包，我就想先用 cdn 引入的方式测试一下。结果不管怎么引用 spritejs 都无效，页面一片空白，processgingjs 也一样，用 fabricjs 画矩形倒是出现了一个框，但是没出现背景颜色。代码都是官网上的例子或者 ai 生成我照抄的，我还把代码 cv 给 claude.ai 看了，它挑出几个无关紧要的错误，例如换 cdn 地址，方括号变花括号等等。下面贴一个代码

<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 ，之前没有写过这么复杂的程序的经验

12 条回复 • 2023-08-06 18:18:23 +08:00

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 via Android

我用了 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 via Android

@lisongeee 这种不存在，但是又看起来很有道理的东西，十有八九 chatgpt

Ace2003

2023-08-06 18:18:23 +08:00 via Android

@okakuyang 这位老哥的代码能运行，我研究一下