简体   繁体   中英

Paper.js library not working with no errors

I am trying to run one of the paperjs website examples, but when I run a local server, I just get a blank screen with no errors. I used bower to install the library, and I am linking to the right paperjs source file. Here is my code:

index.html:

 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="bower_components/paper/dist/paper-full.js"</script> <script type="text/paperscript" src="csim.js" canvas="myCanvas"></script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html> 

csim.js:

 paper.install(window); window.onload = function () { paper.setup(document.getElementById("myCanvas")); var values = { paths: 50, minPoints: 5, maxPoints: 15, minRadius: 30, maxRadius: 90 }; var hitOptions = { segments: true, stroke: true, fill: true, tolerance: 5 }; createPaths(); function createPaths() { var radiusDelta = values.maxRadius - values.minRadius; var pointsDelta = values.maxPoints - values.minPoints; for (var i = 0; i < values.paths; i++) { var radius = values.minRadius + Math.random() * radiusDelta; var points = values.minPoints + Math.floor(Math.random() * pointsDelta); var path = createBlob(view.size * Point.random(), radius, points); var lightness = (Math.random() - 0.5) * 0.4 + 0.4; var hue = Math.random() * 360; path.fillColor = { hue: hue, saturation: 1, lightness: lightness }; path.strokeColor = 'black'; }; } function createBlob(center, maxRadius, points) { var path = new Path(); path.closed = true; for (var i = 0; i < points; i++) { var delta = new Point({ length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5), angle: (360 / points) * i }); path.add(center + delta); } path.smooth(); return path; } var segment, path; var movePath = false; function onMouseDown(event) { segment = path = null; var hitResult = project.hitTest(event.point, hitOptions); if (!hitResult) return; if (event.modifiers.shift) { if (hitResult.type == 'segment') { hitResult.segment.remove(); }; return; } if (hitResult) { path = hitResult.item; if (hitResult.type == 'segment') { segment = hitResult.segment; } else if (hitResult.type == 'stroke') { var location = hitResult.location; segment = path.insert(location.index + 1, event.point); path.smooth(); } } movePath = hitResult.type == 'fill'; if (movePath) project.activeLayer.addChild(hitResult.item); } function onMouseMove(event) { project.activeLayer.selected = false; if (event.item) event.item.selected = true; } function onMouseDrag(event) { if (segment) { segment.point += event.delta; path.smooth(); } else if (path) { path.position += event.delta; } } } 

You have a typo in your HTML doc. The line

<script type="text/javascript" src="bower_components/paper/dist/paper-full.js"</script>

Is missing a closing > before opening the closing tag </script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM