将此Mootools代码转换为jQuery代码

debugcn 发表于 Dev

德普特罗科

我想将脚本转换为jQuery，但这没用...这是Mootools代码：

var bg = $('#counter');
var ctx = ctx = bg.getContext('2d');
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

imd = ctx.getImageData(0, 0, 240, 240);

ctx.putImageData(imd, 0, 0);
ctx.beginPath();
ctx.arc(120, 120, 70, -(quart), ((circ) * 0.5) - quart, false);
ctx.stroke();

这是jsFiddle：http : //jsfiddle.net/Aapn8/2832/

我试图document.id用jquery选择器替换$('')，什么也没有...

谢谢！

Goran.it

这是一个带有链接的有效示例，请记住，对于easyOutBounce动画，您需要其他插件，因为jQuery仅具有简单的动画类型。这需要在dom准备就绪或窗口加载功能上完成（在jsfiddle中，我们使用左侧提供的复选框）

// SVG stuff
var range = $('#range').get(0);
var bg = $('#counter').get(0);
var ctx = ctx = bg.getContext('2d');
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

imd = ctx.getImageData(0, 0, 240, 240);

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}
$(range)
.val(0)
.on('mousemove', function() {
        draw(this.value / 100);
})
.animate({
    'value':100
},{
    'duration':5000,
    'easing':'easeOutBounce',
    'step': function (step, fx) {
        draw(step / 100);
    }
});

http://jsfiddle.net/BLtaF/（附带了宽松的插件）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。