半径不会减少

Question

这是我的脚本：http://jsfiddle.net/VDC5h/

var xStart;
var yStart;
var xStop;
var yStop;
var i=0;
var d=0;
$('#obrazek').click( function(e) {
    if(i==1)
    {
        i=2;
    }
    if(i==0)
    {
        var posX = $(this).offset().left, posY = $(this).offset().top;
        xStart=(e.pageX - posX);
        yStart=(e.pageY - posY);
        i=1;
    }
});
$("#obrazek").on( "mousemove", function(e) {  
    if(i==1)
    {
        var posX = $(this).offset().left, posY = $(this).offset().top;
        xStop=(e.pageX - posX);
        yStop=(e.pageY - posY); 
        d=Math.sqrt(Math.pow(xStart-xStop,2)+Math.pow(yStart-yStop,2))
        $('canvas').drawArc({
            fillStyle: '#000',
            x: xStart, 
            y: yStart,
            radius: d
        });
        $('#d').html(d);                                
    }
});

它有效，但我不能减少半径。半径仅增加。底部是“d”。 “d”=半径。当“d”减小时，半径不会减小。

我的错误在哪里？

Answer 1

您需要先清除上一张图：

e.g。

http://jsfiddle.net/VDC5h/1/

    // Erase previous drawing
    $('canvas').drawArc({
        fillStyle: '#fff',
        x: xStart, 
        y: yStart,
        radius: d+1});
    d=Math.sqrt(Math.pow(xStart-xStop,2)+Math.pow(yStart-yStop,2))
    $('canvas').drawArc({
        fillStyle: '#000',
        x: xStart, 
        y: yStart,
        radius: d
    });

注意：我使用旧尺寸作弊并简单地重新绘制了之前的弧线（白色），但您应该只是清除画布。我添加了1到d，因为舍入错误留下了一条微弱的痕迹。