javascript - 从 Canvas 中删除元素

Question

这是我的jsfiddle:

http://jsfiddle.net/alonshmiel/c4upM/45/

为了完成任务，我需要做两件事:

1) 当用户点击灰色小圆圈时，删除浅蓝色小圆圈中的线条。

我尝试在这段代码中执行以下操作:

// hide the line of the small light blue circle
var c=document.getElementById(canvas_id);
var ctx=c.getContext("2d");
ctx.clearRect(c.getAttribute('cx')-1,c.getAttribute('cy')-95,2,40);

它可以工作，但并不完美(clearRect 清除我想要清除的小区域的一部分)。

2) 当用户点击浅蓝色小圆圈时，删除灰色小圆圈中的线条。

感谢任何帮助!

感谢您的阅读!

Answer 1

如果我理解你的问题是正确的，你的意思是clearRect清除了你不想要清除的东西的一部分？特别是，我假设您的意思是在删除线条后，圆圈下方的灰色圆弧留下了伪影。

问题是你当前的“修复”还不够。就像在删除蓝色圆圈中的线后必须重新绘制蓝色圆圈一样，您也需要重新绘制圆弧，因为它的一部分正在通过您的clearRect调用被删除。

一般来说，很难准确地说明某些绘制例程将如何在某些浏览器中实现。抗锯齿可能会打开或关闭(等等)，导致“修复”变得困难。一种更简单的方法(除非渲染能力非常重要，否则是首选方法)是在单击圆圈时清除整个背景，然后重新渲染所有内容，除了有问题的线。