html原点颜色怎么改,如何更改html 5中每个圆圈的颜色？

这是html5的代码。我从我的讲师那里得到了这个。他以此为例。问题是，如何改变每个圆的颜色？请帮帮我。我需要在明天之前提交我的工作。谢谢。如何更改html 5中每个圆圈的颜色？

HTML5代码

DATA VISUALIZATION

UMP Online Learning Behavior Visualization Based On Moodle Logs.

Your browser does not support the canvas element.

Your browser does not support the canvas element.

Your browser does not support the canvas element.

Your browser does not support the canvas element.

Your browser does not support the canvas element.

Your browser does not support the canvas element.

Your browser does not support the canvas element.

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("MONDAY",10,50);

var a = c.width/2;

var b = c.height/2;

var data = new Array();

for (i=0;i<9;i++)

data[i] = Math.floor((Math.random()*10)+1)*10;

createMolecule(data, a, b);

c=document.getElementById("myCanvas2");

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("TUESDAY",10,50);

a = c.width/2;

b = c.height/2;

createMolecule(data, a, b);

c=document.getElementById("myCanvas3");

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("WEDNESDAY",10,50);

a = c.width/2;

b = c.height/2;

createMolecule(data, a, b);

c=document.getElementById("myCanvas4");

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("THURSDAY",10,50);

a = c.width/2;

b = c.height/2;

createMolecule(data, a, b);

c=document.getElementById("myCanvas5");

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("FRIDAY",10,50);

a = c.width/2;

b = c.height/2;

createMolecule(data, a, b);

c=document.getElementById("myCanvas6");

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("SATURDAY",10,50);

a = c.width/2;

b = c.height/2;

createMolecule(data, a, b);

c=document.getElementById("myCanvas7");

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("SUNDAY",10,50);

a = c.width/2;

b = c.height/2;

createMolecule(data, a, b);

JS代码

function createMolecule(data, a, b)

{

var n = data.length;

var degree = (2*(Math.PI))/n;

//alert(degree);

var temp;

var tempX = new Array();

var tempY = new Array();

ctx.fillStyle="#DC143C";

for (i=0;i

{

temp = degree*(i+1);

ctx.moveTo(a,b);

x = a + 2*Math.cos(temp)*data[i];

y = b + 2*Math.sin(temp)*data[i];

ctx.lineTo(x,y);

ctx.lineWidth=2;

ctx.strokeStyle="#696969";

ctx.stroke();

tempX[i] = x;

tempY[i] = y;

ctx.moveTo(tempX[i],tempY[i]);

ctx.arc(tempX[i],tempY[i],data[i]/2,0,Math.PI*2,true);

ctx.stroke();

ctx.fill();

}

//draw centre circle

ctx.fillStyle="#FFFF00";

ctx.arc(a,b,10,0,Math.PI*2,true);

ctx.stroke();

ctx.fill();

for (i=0;i

{

ctx.fillStyle="#000000";

ctx.font="10px Arial";

ctx.fillText(data[i],tempX[i],tempY[i]);

}

}// end of function

2013-06-01

izdihar