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选择器document.id替换$('')，没有...

谢谢！

Answer 1

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

Learn how to debug JavaScript。然后，您将看到您收到的错误消息和位置（例如，在这种情况下：TypeError: bg.getContext is not a function），设置断点并检查变量等等！

Answer 2

这是一个带链接的工作示例，请记住，对于easeOutBounce动画，您需要额外的插件，因为仅jQuery只有简单的动画类型。这需要在dom ready或窗口加载函数上完成（在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/（附加缓动插件）

将此Mootools代码转换为jQuery代码

2 个答案: