Convert this Mootools code into jQuery code [closed]

问题

I'm want to convert script to jQuery, but it dosen't work... it was Mootools code :

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();

Here is the jsFiddle : http://jsfiddle.net/Aapn8/2832/

I tried to replace the document.id with the jquery selector $(''), nothing...

Thanks !

回答1:

Here is a working example with the link, remember that for the easeOutBounce animation you need additional plugin as jQuery alone has just simple animation types. This needs to be done on dom ready or window load functions (in jsfiddle we are using provided checkbox on the left)

// 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/ (with easing plugin attached)

回答2:

bg is a jQuery object now. If you want to access the underlying DOM element, you can use bg[0], e.g. bg[0].getContext(...).

Learn how to debug JavaScript. Then you'll see which error message you are getting and where (e.g. in this case: TypeError: bg.getContext is not a function), set breakpoints and inspect variables, and much more!

来源：https://stackoverflow.com/questions/21952749/convert-this-mootools-code-into-jquery-code

标签

javascript

jquery

mootools