Javascript 如何让warp.js库正常工作？

我真的不知道这个图书馆是否对其他人感兴趣，但它在几个方面挑战了我的自尊。该代码并非来自于实际工作，而是仅用于学习目的。正如您所看到的，我只是想运行一个“hello world”，但官方文档中肯定有一些未解释的内容（）。因为，如果有人有这方面的经验，他们的帮助将被广泛接受。谢谢

//输入画布
var c=document.getElementById（“输入画布”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“尖叫”）；
ctx.drawImage（img，0,0）；
//视口画布
var warp=新扭曲({
输入画布：$（“#输入画布”）.get（0），
视口画布：$（“#视口画布”）.get（0），
前100名，
左：100
});
变形({
中心：{x:100，y:100}，
半径：50，
角度：45
});

画布：

您收到的
类型错误：无法读取未定义的属性“width”
错误是由于Warp库无法通过在options对象中传递的jQuery选择器确定画布的宽度。将jQuery选择器切换为普通JavaScript选择器可以解决这个问题，如下所示


var c=document.getElementById（“输入画布”）；
var ctx=c.getContext（“2d”）；
var img=新图像（）；
img.src='数据：image/png；base64，IVBORW0KGGOAAAANSUHEUGAAAJCAAACXAQMAAIUVS6AAAABLBVEUEAGT8/VxJVSDEAAAO0LEQVRIX+3QAIBDAWG9ONKIQAYNG+VGAAIHNTL7EO1YCNOVJG9JGHLVZAAAWVLPZVWH1LDXOWHCSIKEAAAASUV5YII='；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
var warp=新扭曲({
输入画布：$（“#输入画布”）.get（0），
viewport_canvas:document.getElementById（“vp_canvas”），
前100名，
左：100
});
变形({
中心：{x:100，y:100}，
半径：50，
角度：45
});
};

画布：

在您的代码片段中没有ID为
scream
的元素……没错，我已经在编辑器中修复了。“尖叫”应该是“网格”。无论如何，我的控制台一直在说：uncaughttypeerror:无法读取Warp上未定义的属性“width”。_init（Warp.js:30）在Warp.php:24的newwarp（Warp.js:12）上