Menganimasikan Lingkaran Isi menggunakan Canvas

Pada dasarnya saya ingin dapat Mengisi Lingkaran menggunakan kanvas, tetapi dianimasikan hingga persentase tertentu. Artinya, lingkarannya hanya terisi 80%.

Pengetahuan kanvas saya tidak luar biasa, Ini adalah gambar yang saya buat di photoshop untuk menampilkan apa yang saya inginkan.

AnimateSequence

Saya ingin lingkaran mulai kosong dan kemudian Isi hingga 70% lingkaran. Apakah ini mungkin dilakukan dengan Canvas, jika demikian? adakah yang bisa menjelaskan cara melakukannya?

Inilah sedikit dari apa yang telah saya kelola

http://jsfiddle.net/6Vm67/

 var canvas = document.getElementById('Circle');
 var context = canvas.getContext('2d');
 var centerX = canvas.width / 2;
 var centerY = canvas.height / 2;
 var radius = 80;

 context.beginPath();
 context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 context.fillStyle = '#13a8a4';
 context.fill();
 context.lineWidth = 10;
 context.strokeStyle = '#ffffff';
 context.stroke();

Bantuan apa pun akan sangat dihargai


canvas html geometry animated
person Blackline    schedule 31.05.2013    source sumber
comment
Saya menyarankan Anda untuk menggunakan Kerangka KineticJS! Namun, jika Anda benar-benar hanya ingin menggunakan kanvas, coba dokumen ini: Gerakan Linier Kanvas   -  person Bruno Croys Felthes    schedule 31.05.2013

Jawaban (2)


arrow_upward
7
arrow_downward

Memotong daerah membuat hal ini menjadi sangat mudah. Yang harus Anda lakukan adalah membuat bagian kliping melingkar dan kemudian mengisi persegi panjang dengan ukuran tertentu untuk mendapatkan isian senilai "lingkaran parsial". Berikut ini contohnya:

var canvas = document.getElementById('Circle');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;

var full = radius*2;
var amount = 0;
var amountToIncrease = 10;

function draw() {
    context.save();
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.clip(); // Make a clipping region out of this path
    // instead of filling the arc, we fill a variable-sized rectangle
    // that is clipped to the arc
    context.fillStyle = '#13a8a4';
    // We want the rectangle to get progressively taller starting from the bottom
    // There are two ways to do this:
    // 1. Change the Y value and height every time
    // 2. Using a negative height
    // I'm lazy, so we're going with 2
    context.fillRect(centerX - radius, centerY + radius, radius * 2, -amount);
    context.restore(); // reset clipping region

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.lineWidth = 10;
    context.strokeStyle = '#000000';
    context.stroke();

    // Every time, raise amount by some value:
    amount += amountToIncrease;
    if (amount > full) amount = 0; // restart
}

draw();
// Every second we'll fill more;
setInterval(draw, 1000);

http://jsfiddle.net/simonsarris/pby9r/

person Simon Sarris    schedule 31.05.2013

arrow_upward
3
arrow_downward

Ini adalah versi yang sedikit lebih dinamis dan berorientasi objek, sehingga Anda dapat mengonfigurasi opsi seperti radius lingkaran, lebar batas, warna, durasi dan langkah animasi, Anda juga dapat menganimasikan lingkaran hingga persentase tertentu. Menulis ini cukup menyenangkan.

<canvas id="Circle" width="300" height="300"></canvas>
<script>
    function Animation( opt ) {
        var context = opt.canvas.getContext("2d");
        var handle = 0;
        var current = 0;
        var percent = 0;

        this.start = function( percentage ) {
            percent = percentage;
            // start the interval
            handle = setInterval( draw, opt.interval );
        }

        // fill the background color
        context.fillStyle = opt.backcolor;
        context.fillRect( 0, 0, opt.width, opt.height );

        // draw a circle
        context.arc( opt.width / 2, opt.height / 2, opt.radius, 0, 2 * Math.PI, false );
        context.lineWidth = opt.linewidth;
        context.strokeStyle = opt.circlecolor;
        context.stroke();

        function draw() {
            // make a circular clipping region
            context.beginPath();
            context.arc( opt.width / 2, opt.height / 2, opt.radius-(opt.linewidth/2), 0, 2 * Math.PI, false );
            context.clip();

            // draw the current rectangle
            var height = ((100-current)*opt.radius*2)/100 + (opt.height-(opt.radius*2))/2;
            context.fillStyle = opt.fillcolor;
            context.fillRect( 0, height, opt.width, opt.radius*2 );

            // clear the interval when the animation is over
            if ( current < percent ) current+=opt.step;
            else clearInterval(handle);
        }
    }

    // create the new object, add options, and start the animation with desired percentage
    var canvas = document.getElementById("Circle");
    new Animation({
        'canvas': canvas,
        'width': canvas.width,
        'height': canvas.height,
        'radius': 100,
        'linewidth': 10,        
        'interval': 20,
        'step': 1,
        'backcolor': '#666',
        'circlecolor': '#fff',
        'fillcolor': '#339999'
    }).start( 70 );
</script>
person Danijel    schedule 31.05.2013