Canvas清除Paper.js

Question

有没有人知道使用paper.js清除画布的最佳方法我尝试了常规的画布清除方法,但它们似乎不适用于paper.js

HTML

<canvas id="myCanvas" style="background:url(images/graphpaper.jpg); background-repeat:no-repeat" height="400px" width="400px;"></canvas>

<button class="btn btn-default button" id="clearcanvas" onClick="clearcanvas();"     type="button">Clear</button>    

使用Javascript/Paperscript

<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
tool.minDistance = 5;

var path;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

function onMouseDown(event) {
// Create a new path and give it a stroke color:
path = new Path();
path.strokeColor = 'red';
path.strokeWidth= 3;
path.opacity="0.4";

// Add a segment to the path where
// you clicked:
path.add(event.point, event.point);
}

function onMouseDrag(event) {
// Every drag event, add a segment
// to the path at the position of the mouse:
path.add(event.point, event.point);

}


</script>

Answer 1

定期清除不起作用,因为paper.js维护一个场景图并负责为您绘制它.如果要清除在项目中创建的所有项目,则需要删除实际项目:

project.activeLayer.removeChildren();只要您的所有项目都在一个图层内,就可以正常工作.还project.clear()可以删除所有内容,包括图层.

Answer 2

c.width = c.width; ctx.clearRect(0,0,c.width,c.height);如果你还没有尝试过的话，应该是一个很好的包罗万象的东西。

但请注意 - 设置画布宽度将重置画布状态，包括任何应用的变换。

快速谷歌带我到https://groups.google.com/forum/#!topic/paperjs/orL7YwBdZq4，它指定了另一个（更具体的 paper.js ）解决方案： project.activeLayer.removeChildren();