8 
<!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？

尝试演示

我的要求是做这个演示。我想必须This demo24/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 Image

4

2 回答 2

7

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

拨号

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);
}
于 2013-08-12T14:31:37.693 回答
5

虽然Harsh已经提供了一个非常有用的答案，但它与您描绘的线框图有关。

我认为向您展示如何实现各个部分的绘图也会很有用。

我认为您在 PNG 中要求的太多了，因为我们实际上会为您创建项目，但是通过我的回答和 Harsh 的回答，我相信您可以得到您想要的：

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

于 2013-08-12T21:45:17.063 回答