Как разделить круги на равные части 24/7 с помощью canvas?

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Growing Circles</title>
  </head>
  <body>
    <canvas id="c" width="960" height="720"></canvas>
  </body>
</html>

JavaScript

var canvas = document.getElementById( "c" ),
    ctx = canvas.getContext( "2d" );

ctx.lineWidth = 3;

ctx.beginPath();
ctx.arc( 500, 350, 60, 0, 2 * Math.PI, false );
ctx.fillStyle = "#4DA54D";
ctx.fill();
ctx.strokeStyle = "DarkRed";
ctx.stroke();

ctx.beginPath();
ctx.arc( 500, 350, 120, 0, 2 * Math.PI, false );
ctx.strokeStyle = "OliveDrab";
ctx.stroke();

ctx.beginPath();
ctx.arc( 500, 350, 180, 0, 2 * Math.PI, false );
ctx.strokeStyle = "#530053";
ctx.stroke();

ctx.beginPath();
ctx.arc( 500, 350, 240, 0, 2 * Math.PI, false );
ctx.strokeStyle = "#208181";
ctx.stroke();

ctx.beginPath();
ctx.arc( 500, 350, 300, 0, 2 * Math.PI, false );
ctx.strokeStyle = "#CC7A00";
ctx.stroke();

ctx.beginPath();
ctx.arc( 500, 350, 360, 0, 2 * Math.PI, false );
ctx.strokeStyle = "#205450";
ctx.stroke();

Я хочу разделить This demo в 24 часа временной шкалы с помощью линий. Я пробовал немного, но не до Марка.Он идет очень большой в коде! Есть ли другой способ решить это в небольшом куске кода, например, с помощью slice как в Tried demo ?

Пробовал Demo

Мое Требование сделать как демо. Я хочу иметь This demo быть отрезанным 24/7 где 24 представляют часов и 7 дней.

Дополнительные Требования:: даже я должен иметь доступ к particular arc что я хочу, в зависимости от day and hour !

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

вот как я пытался напечатать цифры .. function drawnumbers(){ for(var i=1; i< hours+1;i++){ context.font="18px sans-serif"; context.fillText(+i,20+i*30,20+i*30); } }но я хочу, чтобы они были на внешнем круге, как в png Изображение

8
css html5-canvas javascript

2 ответов

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

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

Я думаю, что вы попросили слишком много в своем PNG, поскольку мы практически создадим ваш проект для вас, но с моим ответом и ответом Харша я считаю, что вы можете получить то, что вы хочу:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// centre or center for US :) the drawing
var x = canvas.width / 2;
var y = canvas.height / 2;

// number of days
var days = 7;

// number of hours
var hours = 24;

// one segment represents an hour so divide degrees by hours
var segmentWidth = 360 / hours;

// begin at 0 and end at one segment width
var startAngle = 0;
var endAngle = segmentWidth;

// how thick you want a segment
var segmentDepth = 30;

function init() {
    for (var i = 1; i <= days; i++) {
        drawSegments(i * segmentDepth);
    }
}

function drawSegments(radius) {
    for (var i = 0; i < hours; i++) {
        context.beginPath();
        context.arc(x, y, radius, 
             (startAngle * Math.PI / 180), (endAngle * Math.PI / 180), false);
        context.lineWidth = segmentDepth;
        context.strokeStyle = '#' + 
             (Math.random() * 0xFFFFFF << 0).toString(16);
        context.stroke();

        // increase per segment        
        startAngle += segmentWidth;
        endAngle += segmentWidth;
    }
}

// start drawing our chart
init();

смотрите мой http://jsfiddle.net/U2tPJ/6/ демо.

5

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

циферблат

var canvas = document.getElementById( "c" ),
ctx = canvas.getContext( "2d" ),
strokes = ["DarkRed", "OliveDrab", "#530053", "#208181", "#CC7A00", "#205450"];
ctx.lineWidth = 3;

for(var i=0; i<7; i++) {
  ctx.beginPath();
  ctx.arc( 500, 350, 420-60*i, 0, 2 * Math.PI, false );
  if(i==6) {
    ctx.fillStyle = "#4DA54D";
    ctx.fill();
  }
  ctx.strokeStyle = strokes[i];
  ctx.stroke();
}

// Now do the same for the 24 spokes (Use mathematical formulae)
// this is just from the top of my head, may need some adjustment
angle = 360/25; // you have 24 spokes, so 25 sectors (first and last one overlap or are the same)
for(var j=0; j<24; j++) {
  ctx.beginPath();
  ctx.moveTo(500, 350);
  ctx.lineTo(500+420*Math.sin(angle*j), 350-420*Math.cos(angle*j));
  ctx.strokeStyle = "blue";
  ctx.stroke();
}

метки

для печати этикеток на циферблате:

angle = 360/23;
for(var i=0; i<23; i++) {
  x = <centerX> + <radius> * Math.sin(angle*i*Math.PI/180) // convert from radian to angle
  y = <centerY> - <radius> * Math.cos(angle*i*Math.PI/180)
  context.fillText(i+1, x, y);
}
7