为什么 cdn 引入的 canvas 库无效

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

okakuyang

277 天前

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