Question

这是html5的代码。我从讲师那里得到了这个。他把这作为样本。问题是，如何改变每个圆圈的颜色？请帮我。我需要明天提出我的工作。感谢。

HTML5代码

<!DOCTYPE html>
<html>
<head><title>DATA VISUALIZATION</title></head>
<body>
<h1>UMP Online Learning Behavior Visualization Based On Moodle Logs.</h1>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas2" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas3" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas4" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas5" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> 
<canvas id="myCanvas6" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas7" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" src="molecule1.js"></script>
<script type="text/javascript">

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

</script> 
</body>
</html>

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<n;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<n;i++)
{

ctx.fillStyle="#000000";
ctx.font="10px Arial";
ctx.fillText(data[i],tempX[i],tempY[i]);

}

}// end of function

Answer 1

您可以在JavaScript中更改ctx.fillStyle下的圆圈颜色。将ctx.fillStyle设置为具有所需颜色的十六进制代码的字符串（或者您可以使用常用颜色，RGB或RGBA）

Answer 2

您错过了beginPath()和closePath()。

试试这个：

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 < n; i++) {

        ctx.beginPath();

        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.fillStyle = get_random_color();

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

        ctx.closePath();

    }


    //draw centre circle
    ctx.fillStyle = "#FFFF00";
    ctx.arc(a, b, 10, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.fill();

    for (i = 0; i < n; i++) {

        ctx.fillStyle = "#000000";
        ctx.font = "10px Arial";
        ctx.fillText(data[i], tempX[i], tempY[i]);

    }

}

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

我在createMolecule中找到的for循环的开头和结尾添加了开始和结束。

我还添加了一个由Random color generator in JavaScript

提供的随机颜色生成器

如何更改html 5中每个圆圈的颜色？

2 个答案: