Convert this Mootools code into jQuery code [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question does not appear to be about programming within the scope defined in the help center.

Closed 8 years ago.

Improve this question

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 !

Answer 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)

Answer 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!