Question

如何在jsFiddle中运行此代码？ Adam Khoury在http://www.developphp.com/view.php?tid=1262

站点的原始代码

我已经进行了实验，并且能够显示按钮以显示画布轮廓，但是在单击按钮时无法使对象从左向右动画。

这是我尝试让它在jsFiddle中运行...

function draw(x,y){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.save();
    ctx.clearRect(0,0,550,400);
    ctx.fillStyle = "rgba(0,200,0,1)";
    ctx.fillRect (x, y, 50, 50);
    ctx.restore(); 
    x += 1;
    var loopTimer = setTimeout('draw('+x+','+y+')',30);
}

感谢您的帮助。

Answer 1

JSFiddle的默认设置允许JavaScript运行onLoad，或者在HTML加载后。

这适用于大多数情况，除非您使用on*属性执行JS内联，因为JS没有加载，因此您无法访问其变量和方法。

您需要将onLoad更改为顶部左侧边栏中的No wrap - in <head>：这会将您的JS放入<script>标记中。头部加载到其他所有内容之前（无论你放在HTML区域中），所以当你使用onclick属性来引用你的draw()函数时，它已经被定义了。

您也可以使用No wrap - in <body>，因为JS仍然会放在HTML的其余部分之前，但是将其放在head中应该可以在大多数情况下为您提供服务。

如果你检查了控制台，你会看到ReferenceError: Can't find variable: draw，它会告诉你在尝试访问draw()之前你的JS没有加载。

enter image description here

Demo

如何让这段代码在jsFiddle中运行？

1 个答案: