javascript - 单击按钮更新/重绘 Canvas

Question

我正在使用 cirque.js 插件来显示用 Canvas 绘制的圆圈百分比值。

这是一个JSFIDDLE我制作的应该包含插件代码的所有信息。

最初，使用正确的值正确绘制了圆。

问题:当我尝试通过单击按钮的函数更新值时，没有任何反应，不起作用，我认为 Canvas 需要使用新值再次绘制？

问:如何异步更新圆圈百分比值？

$('.cirque').cirque ({ //this works
    radius: 40,
    value: 65,
    total: 100,
    trackColor: '#ccc',
    arcColor: '#5cb85c',
    label: 'percent',
    lineWidth: 12
});

$('#update').click(function (e) { 
    updateCircle(50); //this does not work
});

function updateCircle(val){ 
    $('.cirque').cirque ({
        radius: 40,
        value: val,
        total: 100,
        trackColor: '#ccc',
        arcColor: '#5cb85c',
        label: 'percent',
        lineWidth: 12
    });
}

Answer 1

我在这个插件中没有找到任何更新值的函数。但你可以用一个技巧来更新值。将具有类 cirque 的 div 替换为相同的 div 并使用新值对其进行初始化，如下所示。希望这会对您有所帮助。

function updateCircle(val){
    var cirque=$('<div class="cirque"></div>');
    $('.cirque').replaceWith(cirque);

    cirque.cirque ({
         radius: 40,
         value: val,
         total: 100,
         trackColor: '#ccc',
         arcColor: '#5cb85c',
         label: 'percent',
         lineWidth: 12
    }); 
}

更新的 fiddle :https://jsfiddle.net/8d9sw1yg/2/