2017-03-19 161 views
1

所以我'尝试绘制形状,每次用户按一个键,但是我得到奇怪的控制台错误。Paper.js不绘制形状

paper-full.js:14632 Uncaught SyntaxError: Identifier directly after number (8:42) 
at t (paper-full.js:14632) 
at E (paper-full.js:14632) 
at y (paper-full.js:14632) 
at g (paper-full.js:14632) 
at U (paper-full.js:14632) 
at z (paper-full.js:14632) 
at ue (paper-full.js:14632) 
at oe (paper-full.js:14632) 
at ae (paper-full.js:14632) 
at te (paper-full.js:14632) 

我不熟悉paper.js。我的HTML,脚本代码似乎是正确的,如果有人将下降伸出援助之手,将是一个很大的缓解。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Sounds of keyboard</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.js"></script> 
 

 
\t <script type="text/paperscript" canvas="canvas"> 
 
\t \t var circles = []; 
 

 
\t \t function onKeyDown(event){ 
 
\t \t \t var maxPoint = new Point(view.size.width, view.size.height); 
 
\t \t \t var randomPoint = Point.random(); 
 
\t \t \t var point = maxPoint * randomPoint; 
 
\t \t \t var newCircle = new Path.Circle(point, 5oo); 
 
\t \t \t newCircle.fillColor = "orange"; 
 
\t \t \t circles.push(newCircle); 
 
\t \t } 
 

 
\t \t function onFrame(event){ 
 
\t \t for(var i=0; i<circles.length; i++){ 
 
\t \t circles[i].fillColor.hue += 1; 
 
\t \t circles[i].scale(.9); 
 
\t \t } 
 
\t \t } 
 

 

 
\t </script> 
 
</head> 
 
<body> 
 

 

 
<canvas id="canvas" resize></canvas> 
 
</body> 
 
</html>

回答

0

通过更换new Path.Circle(point, 5oo)new Path.Circle(point, 500),它的工作原理:)

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Sounds of keyboard</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.js"></script> 
 

 
\t <script type="text/paperscript" canvas="canvas"> 
 
\t \t var circles = []; 
 

 
\t \t function onKeyDown(event){ 
 
\t \t \t var maxPoint = new Point(view.size.width, view.size.height); 
 
\t \t \t var randomPoint = Point.random(); 
 
\t \t \t var point = maxPoint * randomPoint; 
 
\t \t \t var newCircle = new Path.Circle(point, 500); 
 
\t \t \t newCircle.fillColor = "orange"; 
 
\t \t \t circles.push(newCircle); 
 
\t \t } 
 

 
\t \t function onFrame(event){ 
 
\t \t for(var i=0; i<circles.length; i++){ 
 
\t \t circles[i].fillColor.hue += 1; 
 
\t \t circles[i].scale(.9); 
 
\t \t } 
 
\t \t } 
 

 

 
\t </script> 
 
</head> 
 
<body> 
 

 

 
<canvas id="canvas" resize></canvas> 
 
</body> 
 
</html>