将此Mootools代码转换为jQuery代码

Question

我想把脚本转换成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/

我试着用jquery选择器$('')替换$('')，什么都没有.

谢谢！

Answer 1

下面是一个带有链接的工作示例，请记住，对于easeOutBounce动画，您需要额外的插件，因为只有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/ (附带宽松插件)

Answer 2

bg现在是一个jQuery对象。如果要访问基础DOM元素，可以使用bg[0]，例如bg[0].getContext(...)。

学习如何 JavaScript.然后，您将看到所收到的错误消息以及在何处(例如：TypeError: bg.getContext is not a function)，设置断点并检查变量，等等！