拨号

Question

<!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小时时间线。我尝试了很少但没有达到标记。它的代码非常大！有没有其他方法可以在像Tried demo中那样使用切片的小块代码中解决这个问题？

Tried Demo

我的要求是This demo。我想让This demo全天候切片，其中24代表小时，7代表天。

进一步要求 ::即使我必须能够根据particular arc访问我想要的day and hour！

最后我希望看到这样Image我将传递参数（日，小时，颜色），然后该特定的片段应该改变颜色，如图中所示。

这是我试图打印数字的方式.. 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图像

Answer 1

伙计，你正在做 PROGRAMMING ，那你为什么害怕使用这些工具呢？使用循环和变量。

拨号

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();
}

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/演示。

如何使用画布将Circles分成24/7等份？

2 个答案:

拨号

标签