Paper.js 잡히지 않은 구문 오류

Paper.js로 많은 문제가 발생합니다. Udmy에 Colt Steele 's Web Developer Bootcamp를하고 있습니다. 저는 섹션 19에 있습니다. 현재 Patatap 클론을 만들려고합니다. 여기에 내가 갇혀있을 때입니다 : 해야하는 무엇Paper.js 잡히지 않은 구문 오류

http://codepen.io/SlouchingToast/pen/LWLXYZ

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Circles</title> 
    <link rel="stylesheet" type="text/css" href="circles.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.min.js"></script> 

    <script type="text/paperscript" canvas="myCanvas"> 

    function onKeyDown(event) { 
     var maxPoint = new Point(view.size.width, view.size.height); 
     var randomPoint = Point.random(); 
     var point = maxPoint * randomPoint; 
     new Path.Circle(point, 10).fillColor = "olive"; 
    } 

    var animatedCircle = new Path.Circle(new Point(300,300), 100); 
    animatedCircle.fillColor = "red"; 

    } 

    </script> 
</head> 
<body> 
    <canvas id="myCanvas" resize></canvas> 

</body> 
</html>

CSS

canvas { 
    width: 100%; 
    height: 100%; 
    background: black; 
} 

body, html { 
height: 100%; 
margin: 0; 
}

크롬 콘솔 오류

Uncaught ReferenceError: animatedCircle is not defined 
    at at.paper._execute (<anonymous>:11:2) 
    at u (paper-full.min.js:38) 
    at HTMLCollection.l (paper-full.min.js:38) 
    at HTMLCollection.l (paper-full.min.js:32) 
    at Function.f [as each] (paper-full.min.js:32) 
    at f (paper-full.min.js:38) 
paper._execute @ VM519:11 
u @ paper-full.min.js:38 
l @ paper-full.min.js:38 
l @ paper-full.min.js:32 
f @ paper-full.min.js:32 
f @ paper-full.min.js:38

일어날 일은 단지 원을 표시하는 것입니다. 그게 전부 야.

출처

2017-03-14 David

닫기 스크립트 태그 바로 앞에 추가 닫기 괄호가 있습니다. 그것은 하나의 오류입니다. – Brian

아래의 paperscript를 대체하여 작동합니다. 먼저 불필요한 끝 태그 }을 제거하십시오. 둘째로 animateCircle에서 animatedCircle으로 수정하십시오.

<script type="text/paperscript" canvas="myCanvas"> 
    function onKeyDown(event) { 
     var maxPoint = new Point(view.size.width, view.size.height); 
     var randomPoint = Point.random(); 
     var point = maxPoint * randomPoint; 
     new Path.Circle(point, 10).fillColor = "olive"; 
    } 

    var animatedCircle = new Path.Circle(new Point(300,300), 100); 
    animatedCircle.fillColor = "red"; 
    </script>

출처

2017-03-20 09:15:15 sapics

답변

관련 문제