Question

是否可以仅删除添加到canvas？

的las线

我希望在鼠标后面有一条垂直线：http://jsfiddle.net/YsTWV/1/，但是想要保持蓝线不变并删除鼠标所在的线......

这可能吗？或者我是否必须重新绘制整个canvas：http://jsfiddle.net/YsTWV/2/

Answer 1

<canvas>操作不能被反转，因为（子像素）抗锯齿可能导致绘制操作除了实际线上的像素之外的其他像素。

进行完整的<canvas>重绘或部分<canvas>重绘。

不要在<canvas>对象本身上保留任何状态。

Answer 2

@Mikko回答说，<canvas>个元素无法删除如果需要修改图形，可能需要考虑使用SVG。

<svg style="width:400px;height:300px; border:1px solid #ccf;" viewBox="0 0 400 300">
    <path d="M-1 0 l 0 300" style="stroke: grey"/>
    <path d="M0 0 L 400 300" style="stroke: blue"/>
</svg>

使用Javascript：

var svg = document.getElement('svg');
var grey = svg.children[0];
window.addEvent('mousemove', function (event) {
    grey.pathSegList.getItem(0).x = event.event.clientX;
});

http://jsfiddle.net/rzymek/R8KtC/

从HTML <canvas> </canvas>清除绘制的线条

2 个答案: