Преобразуйте этот код Mootools в код jQuery

0

Я хочу преобразовать скрипт в 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 $(''), ничего...

Благодаря !

  • 5
    Этот вопрос кажется не по теме, потому что речь идет о преобразовании конкретного сценария в другую библиотеку. Это никому не пригодится.
  • 1
    Речь идет об изучении различий между двумя библиотеками, для других;)
Показать ещё 3 комментария
Теги:
mootools

2 ответа

0
Лучший ответ

Вот рабочий пример со ссылкой, помните, что для анимации easeOutBounce вам нужен дополнительный плагин, так как только jQuery имеет только простые типы анимации. Это должно быть сделано для функций готовности дома или окна (в 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/ (с добавлением плавного плагина)

1

bg теперь является объектом jQuery. Если вы хотите получить доступ к базовому элементу DOM, вы можете использовать bg[0], например bg[0].getContext(...).

Узнайте, как отлаживать JavaScript. Затем вы увидите, какое сообщение об ошибке вы получаете и где (например, в этом случае TypeError: bg.getContext is not a function), устанавливайте точки останова и проверяйте переменные и многое другое!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню