Question

如何将具有不同颜色和长度的另一个笔划添加到同一个圆圈中？该脚本使用Mootools lib。它可以用纯JavaScript或jQuery转换吗？

谢谢：）

// SVG stuff
var ctx = document.id('counter').getContext('2d');
var circ = Math.PI * 2;
var quart = Math.PI / 2;

ctx.beginPath();
ctx.strokeStyle = '#ff00ab';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10;

var imd = ctx.getImageData(0, 0, 160, 160);

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.arc(119, 70, 60, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}

var myFx = new Fx({
    duration: 5500,
    transition: 'bounce:out',
    onStep: function(step){
        draw(step / 100);
    }
});

myFx.set = function(now){
    var ret = Fx.prototype.set.call(this, now);
    this.fireEvent('step', now);
    return ret;
};

myFx.start(0, 80);

Answer 1

绘制第二条路似乎对我来说很好。

// SVG stuff
var ctx = document.id('counter').getContext('2d');
var circ = Math.PI * 2;
var quart = Math.PI / 2;

var imd = ctx.getImageData(0, 0, 160, 160);

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.strokeStyle = '#ff00ab';
    ctx.lineCap = 'square';
    ctx.lineWidth = 10;
    ctx.arc(119, 70, 60, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = '#bb00bc';
    ctx.lineCap = 'square';
    ctx.lineWidth = 5;
    ctx.arc(119, 70, 60, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}

var myFx = new Fx({
    duration: 5500,
    transition: 'bounce:out',
    onStep: function(step){
        draw(step / 100);
    }
});

myFx.set = function(now){
    var ret = Fx.prototype.set.call(this, now);
    this.fireEvent('step', now);
    return ret;
};

myFx.start(0, 80);

将另一个笔划添加到现有的canvas元素

1 个答案: