Графика [canvas]. Картинка заполнялась по часовой стрелке, процентами.

[moslem]

Здравствуйте.

Есть вот такая картинка, она заполняется по вертикали, сделано через HTML/CSS, тоесть там два блока, один с серой картинкой, а другой поверх наложенный с голубой картинкой, и с помощью style="height: 60%;" она увеличивается по вертикали в процентах.



Мне нужно такое сделать чтоб по часовой стрелке заполнялось голубое пространство, начинала с середины и в процентах заполняла эту окружность.

Кто нибудь может помочь, или примеры скинуть где подобное реализовано.

[tsigel]

Вот пример просто заливки цветом.

<canvas width='100' height='100'></canvas>

<script>

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;

    var Circle = function () {
        this.progress = 0;
        this.time = 2000;
        this.start = Date.now();
        this.addDraw();
    };

    Circle.prototype.clear = function () {
        canvas.width = canvas.width;
    };

    Circle.prototype.addDraw = function () {
        requestAnimationFrame(this.draw.bind(this));
    };

    Circle.prototype.draw = function () {
        this.clear();
        var progress = (Date.now() - this.start) / this.time;
        if (progress > 1) {
            progress = 1;
        }

        ctx.strokeStyle = '#c3cbe5';
        ctx.lineWidth = 1;
        var end = 2 * Math.PI;
        var start = - Math.PI / 2;
        ctx.arc(width / 2, height / 2, 50, start, end * progress + start);
        ctx.lineTo(width / 2, height / 2);
        ctx.stroke();
        ctx.fill();

        if (progress < 1) {
            this.addDraw();
        }
    };

    new Circle();

</script>

[tsigel]

Не совсем в тему, но может поможет... Помогите с диаграммой на canvas

[moslem]

tsigel,
cпасибо.