2013-12-13 48 views
0

这是我的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)当用户点击小的浅蓝色圆圈时,从小灰圈中删除该行。

任何帮助表示赞赏!

谢谢您的阅读!

+1

更容易,只是重绘所有内容,但省略了这一行;)这是因为现有的行非常难以“拉出”,因为浏览器自动应用了反锯齿。 – markE

+0

我想过,但我认为这不是有效的..我这样做,非常感谢你!!!!!!!为您的所有帮助! –

回答

2

如果我理解你的问题,你的意思是clearRect清除不要想清除的东西的一部分?特别是,我假设你的意思是圆圈下方的灰色圆弧在删除该行后留下了一个伪影。

问题是您目前的“修理”不足。就像你必须重新绘制蓝色的圆圈后,你也需要重新绘制你的弧线,因为它的一部分被clearRect调用擦除。

一般来说,很难准确地告诉某些浏览器如何执行某些绘制例程。反锯齿可能会打开或关闭(等),导致“修复”变得困难。一个更简单的方法(并且首选,除非渲染能力是非常重要的),就是在点击圆时清除整个背景,然后重新渲染所有内容,除了违规行。