1 Востаннє редагувалося serhi11 (21.07.2016 16:45:51)

Тема: Canvas

на сайті http://serhi11.ho.ua/ в блоці "ВНИМАНИЕ! Акция со скидкой 50% закончится через:" є коло
Як зробити так щоб синій кружок починався зверху, так як показано на скріншоті

Це зроблено з допомогою канвас

Ось код

http://codepen.io/serhi11/pen/QEmQXm

window.onload = function() {
    var timer = $('#action-timer'),
        id, n = 0;

    var progress = new CircularProgress({
        radius: 50,
        lineWidth: 10,
        strokeStyle: 'blue',
        initial: {
            lineWidth: 10,
            strokeStyle: 'red'
        }
    });

    timer.find('.hours').append(progress.el);

    id = setInterval(function() {
        if (n == 100) clearInterval(id);
        progress.update(n++);
    }, 1000);
}

/*-----------------------------------------
+    progress circle
-----------------------------------------*/
var CircularProgress = function(options) {
    this.el = document.createElement('canvas');
    this.options = options;

    this.update = function(value) {
        this.percent = value;
        this.draw();
        return this;
    }

    this.draw = function() {
        var ctx = this.el.getContext('2d'),
            size = this.options.radius * 2,
            angle = 2 * Math.PI / 100 * this.percent,
            half = size / 2,
            x = half,
            y = half;

        this.el.width = size;
        this.el.height = size;

        if (this.options.initial) {
            ctx.beginPath();
            ctx.lineWidth = this.options.initial.lineWidth;
            ctx.strokeStyle = this.options.initial.strokeStyle;
            ctx.arc(x, y, half - this.options.initial.lineWidth, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.closePath();
        }

        ctx.beginPath();
        ctx.lineWidth = this.options.lineWidth;
        ctx.strokeStyle = this.options.strokeStyle;
        ctx.arc(x, y, half - this.options.lineWidth, 0, angle, false);

        ctx.stroke();
        ctx.closePath();

        return this;
    }
}
Post's attachments

Screenshot_1.png 37.11 kb, 171 downloads since 2016-07-21 

2

Re: Canvas

як варіант покрути основний кружечок на 45 градусів проти часової стрілки

3

Re: Canvas

Пробува не допомагає

4 Востаннє редагувалося serhi11 (23.07.2016 14:15:04)

Re: Canvas

Дякую mike.

Зробив!

ось посилання на codepen можливо комусь пригодиться http://codepen.io/serhi11/pen/dXZGAq

================HTML================

<div id="action-timer">
  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
</div>

===========JAVASCRIPT==============

/*-----------------------------------------
+    Timer
-----------------------------------------*/
window.onload = function() {
    var hour = document.getElementById('action-timer').getElementsByClassName('hours');
    var min = document.getElementById('action-timer').getElementsByClassName('minutes');
    var sec = document.getElementById('action-timer').getElementsByClassName('seconds');

    var flagHour = true,
        flagMin = true,
        flagSec = true,
        hourCount = 0,
        minCount = 0,
        secCount = 0;

    var hourProg = new CircularProgress({
        elem: min,
        radius: 59,
        lineWidth: 10,
        strokeStyle: '#4f8cc0',

        text: {
            font: 'bold 40px Calibri',
            fillStyle: '#6c6c6c',
            textAlign: "center",
            textBaseline: "bottom",
            fillText: function(ctx, text, x, y) {
                ctx.fillText(text, x, y + 10);
            }
        },

        initial: {
            lineWidth: 7,
            strokeStyle: '#f1f1f1',

            text: {
                font: '18px Calibri',
                fillStyle: '#6c6c6c',
                textAlign: "center",
                textBaseline: "bottom",
                fillText: function(ctx, text, x, y) {
                    ctx.fillText('часов', x, y + 20);
                }
            }
        }
    });    

    var minProg = new CircularProgress({
        elem: min,
        radius: 59,
        lineWidth: 10,
        strokeStyle: '#4f8cc0',

        text: {
            font: 'bold 40px Calibri',
            fillStyle: '#6c6c6c',
            textAlign: "center",
            textBaseline: "bottom",
            fillText: function(ctx, text, x, y) {
                ctx.fillText(text, x, y + 10);
            }
        },

        initial: {
            lineWidth: 7,
            strokeStyle: '#f1f1f1',

            text: {
                font: '18px Calibri',
                fillStyle: '#6c6c6c',
                textAlign: "center",
                textBaseline: "bottom",
                fillText: function(ctx, text, x, y) {
                    ctx.fillText('минут', x, y + 20);
                }
            }
        }
    });    

    var secProg = new CircularProgress({
        elem: sec,
        radius: 59,
        lineWidth: 10,
        strokeStyle: '#4f8cc0',

        text: {
            font: 'bold 40px Calibri',
            fillStyle: '#6c6c6c',
            textAlign: "center",
            textBaseline: "bottom",
            fillText: function(ctx, text, x, y) {
                ctx.fillText(text, x, y + 10);
            }
        },

        initial: {
            lineWidth: 7,
            strokeStyle: '#f1f1f1',

            text: {
                font: '18px Calibri',
                fillStyle: '#6c6c6c',
                textAlign: "center",
                textBaseline: "bottom",
                fillText: function(ctx, text, x, y) {
                    ctx.fillText('секунд', x, y + 20);
                }
            }
        }
    });    

    var idtimer = setInterval(function() {
        var timer = new Timer('Jul 30 2016 16:00:00', idtimer);        

        if (timer.hour == 0) hourCount = 0;
        if (flagHour) {hourCount = 60 - timer.hour; flagHour = false;}
        hourProg.draw(hourCount = hourCount + 0.025, timer.hour);

        if (timer.min == 0) minCount = 0;
        if (flagMin) {minCount = 60 - timer.min; flagMin = false;}
        minProg.draw(minCount = minCount + 0.05, timer.min);

        if (timer.sec == 0) secCount = 0;
        if (flagSec) {secCount = 60 - timer.sec; flagSec = false;}
        secProg.draw(secCount++, timer.sec);
    }, 1000);
}

var Timer = function (date, id, callback) {
    var newDate = new Date(date),
        date = new Date(),
        timer = newDate - date;

    if (newDate > date) {
        this.hour = parseInt(timer/(60*60*1000))%24;
        this.min = parseInt(timer/(60*1000))%60;
        this.sec = parseInt(timer/1000)%60;
        console.log(this.sec);
    } else {
        callback();
        clearInterval(id);
    }         
}

var CircularProgress = function(options) {
    this.elem = options.elem[0].appendChild(document.createElement('canvas'));
    
    this.draw = function(value, text) {
        var ctx = this.elem.getContext('2d'),
            size = options.radius * 2,
            rad = size / 2,
            x = rad,
            y = rad,
            start = 4.72,
            angle = ((value / 60) * Math.PI*2*10).toFixed(2);

        this.elem.width = size;
        this.elem.height = size;

        ctx.clearRect(0, 0, size, size);

        if (options.initial) {
            ctx.beginPath();
            ctx.lineWidth = options.initial.lineWidth;
            ctx.strokeStyle = options.initial.strokeStyle;
            ctx.arc(x, y, rad - options.initial.lineWidth - 3, 0, Math.PI * 2, false);
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.font = options.initial.text.font;
            ctx.fillStyle = options.initial.text.fillStyle;
            ctx.textAlign = options.initial.text.textAlign;
            ctx.textBaseline = options.initial.text.textBaseline;
            options.initial.text.fillText(ctx, text, x, y);
            ctx.closePath();
        }

        ctx.beginPath();
        ctx.lineWidth = options.lineWidth;
        ctx.strokeStyle = options.strokeStyle;
        ctx.arc(x, y, rad - options.lineWidth, start, value/10+start, false);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.font = options.text.font;
        ctx.fillStyle = options.text.fillStyle;
        ctx.textAlign = options.text.textAlign;
        ctx.textBaseline = options.text.textBaseline;
        options.text.fillText(ctx, text, x, y);
        ctx.closePath();
    }
}
Подякували: leofun011

5

Re: Canvas

demo - http://circliful.pguso.de/

git - https://github.com/pguso/jquery-plugin-circliful

6

Re: Canvas

можна ще таке
http://flipclockjs.com/

Подякували: leofun011