2014-06-21 41 views
-5

如何在jsFiddle中运行此代码?在http://www.developphp.com/view.php?tid=1262如何让这段代码在jsFiddle中运行?

原代码从亚当·扈利的网站,我已经试验和我能够得到的按钮来显示与画布的轮廓,但无法获得由左到动画到右单击该按钮时的对象。

这是我试图让它在的jsfiddle在运行...

http://jsfiddle.net/Tn8xC/

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); 
} 

感谢您的帮助。

+2

那的jsfiddle与错误404页回来...你刚刚发布的完整链接? – msussman

+0

请开发更多的问题 – CMPS

+0

这个问题已经很完善了,jsfiddle是一个你的代码有3个框的地方:html,css和javascript ...教程上的代码混合了他们,他想知道如何分开它 – nightshade

回答

2

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

+0

'无换行'也可以运行 –

+0

@ZachSaucier True;我没有想到这一点,因为我通常只是把它扔在头上。 – AstroCB

+0

谢谢King King和AstroCB。你的建议奏效。 – user1993348