Javascript 如何更改线条颜色和半虚线

[我在一个圆圈上画线条，但我无法将线条颜色更改为黑色。它不断地向我显示白色线条

还有一件事，我希望我的线是半点半法线的，就像我附加的图像一样。

var canvas=document.getElementById（“canvas”）；
var e=canvas.getContext（“2d”）；
功能圆（e、颜色、x、y、半径、星形、端角、顺时针）{
if（arguments.length<9）返回警报（“参数不足。\n函数\“circle\”需要9个参数\n您只提供了“+arguments.length+”）；
e、 beginPath（）；
e、 弧（x，y，半径，星形，端角，顺时针）；
e、 strokeStyle=颜色；
e、 笔划（）；
}
功能图（e，半径）{
var deg360=Math.PI*2；
圆圈（e，“#00688B”，225，225，165，deg360，0，deg360，真）；
e、 fillStyle='#00688B'；
e、 填充（）；
圆圈（e，“#0099CC”，225，225，140，deg360，0，deg360，真）；
e、 fillStyle='#0099CC'；
e、 填充（）；
圆圈（e，“#33A1DE”，225，225，115，deg360，0，deg360，真）；
e、 fillStyle='#33A1DE'；
e、 填充（）；
圆圈（e，“#7EC0EE”，225，225，90，deg360，0，deg360，真）；
e、 fillStyle='#7EC0EE'；
e、 填充（）；
圆圈（e，“#98CCE6”，225，225，65，deg360，0，deg360，真）；
e、 fillStyle='#98CCE6'；
e、 填充（）；
e、 closePath（）；
{
e、 closePath（）；
e、 笔划（）；
e、 strokestyle=“黑色”；
e、 beginPath（）；
e、 linewidth=“17”；
e、 移动到（225225）；
e、 lineTo（320175）；
e、 strokestyle=“黑色”；
e、 笔划（）；
e、 beginPath（）；
e、 setLineDash（[2]）；
e、 lineto（111322）
e、 笔划（）；
圆圈（e，“#E6E8FA”，225，225，45，deg360，0，deg360，真）；
e、 fillStyle='#E6E8FA'；
e、 填充（）；
e、 填充（）；
e、 fillStyle=“black”//用于编写文本的字体颜色
e、 字体=半径*0.18+“像素arial”；
e、 textBaseline=“中间”；
e、 textAlign=“中心”；
e、 填充文本（0，半径，e）；
对于（num=0；num<25；num++）{
ang=num*Math.PI/12；
e、 翻译（225225）；
e、 旋转（ang）；
e、 平移（0，-半径）；
e、 旋转（-ang）；
e、 fillText（num.toString（），0,0）；
e、 旋转（ang）；
e、 平移（0，+半径）；
e、 旋转（-ang）；
e、 setTransform（1,0,0,1,0,0）；
}
}

用于笔划颜色。您正在使用

e.strokestyle

，但它应该是

e.strokestyle

var canvas=document.getElementById（“canvas”）；
var e=canvas.getContext（“2d”）；
抽签（e，50）；
功能圆（e、颜色、x、y、半径、星形、端角、顺时针）{
if（arguments.length<9）返回警报（“参数不足。\n函数\“circle\”需要9个参数\n您只提供了“+arguments.length+”）；
e、 beginPath（）；
e、 弧（x，y，半径，星形，端角，顺时针）；
e、 strokeStyle=颜色；
e、 笔划（）；
}
功能图（e，半径）{
var deg360=Math.PI*2；
圆圈（e，“#00688B”，225，225，165，deg360，0，deg360，真）；
e、 fillStyle='#00688B'；
e、 填充（）；
圆圈（e，“#0099CC”，225，225，140，deg360，0，deg360，真）；
e、 fillStyle='#0099CC'；
e、 填充（）；
圆圈（e，“#33A1DE”，225，225，115，deg360，0，deg360，真）；
e、 fillStyle='#33A1DE'；
e、 填充（）；
圆圈（e，“#7EC0EE”，225，225，90，deg360，0，deg360，真）；
e、 fillStyle='#7EC0EE'；
e、 填充（）；
圆圈（e，“#98CCE6”，225，225，65，deg360，0，deg360，真）；
e、 fillStyle='#98CCE6'；
e、 填充（）；
e、 closePath（）{
e、 beginPath（）；
e、 strokeStyle=“黑色”；
e、 linewidth=“17”；
e、 移动到（225225）；
e、 lineTo（320175）；
e、 strokestyle=“黑色”；
e、 笔划（）；
e、 beginPath（）；
e、 setLineDash（[2]）；
e、 lineto（111322）；
e、 笔划（）；
圆圈（e，“#E6E8FA”，225，225，45，deg360，0，deg360，真）；
e、 fillStyle='#E6E8FA'；
e、 填充（）；
e、 填充（）；
e、 fillStyle=“black”//用于编写文本的字体颜色
e、 字体=半径*0.18+“像素arial”；
e、 textBaseline=“中间”；
e、 textAlign=“中心”；
e、 填充文本（0，半径，e）；
对于（num=0；num<25；num++）{
ang=num*Math.PI/12；
e、 翻译（225225）；
e、 旋转（ang）；
e、 平移（0，-半径）；
e、 旋转（-ang）；
e、 fillText（num.toString（），0,0）；
e、 旋转（ang）；
e、 平移（0，+半径）；
e、 旋转（-ang）；
e、 setTransform（1,0,0,1,0,0）；
}
}
}

---

用于笔划颜色。您正在使用

e.strokestyle

，但它应该是

e.strokestyle

var canvas=document.getElementById（“canvas”）；
var e=canvas.getContext（“2d”）；
抽签（e，50）；
功能圆（e、颜色、x、y、半径、星形、端角、顺时针）{
if（arguments.length<9）返回警报（“参数不足。\n函数\“circle\”需要9个参数\n您只提供了“+arguments.length+”）；
e、 beginPath（）；
e、 弧（x，y，半径，星形，端角，顺时针）；
e、 strokeStyle=颜色；
e、 笔划（）；
}
功能图（e，半径）{
var deg360=Math.PI*2；
圆圈（e，“#00688B”，225，225，165，deg360，0，deg360，真）；
e、 fillStyle='#00688B'；
e、 填充（）；
圆圈（e，“#0099CC”，225，225，140，deg360，0，deg360，真）；
e、 fillStyle='#0099CC'；
e、 填充（）；
圆圈（e，“#33A1DE”，225，225，115，deg360，0，deg360，真）；
e、 fillStyle='#33A1DE'；
e、 填充（）；
圆圈（e，“#7EC0EE”，225，225，90，deg360，0，deg360，真）；
e、 fillStyle='#7EC0EE'；
e、 填充（）；
圆圈（e，“#98CCE6”，225，225，65，deg360，0，deg360，真）；
e、 fillStyle='#98CCE6'；
e、 填充（）；
e、 closePath（）{
e、 beginPath（）；
e、 strokeStyle=“黑色”；
e、 linewidth=“17”；
e、 移动到（225225）；
e、 lineTo（320175）；
e、 strokestyle=“黑色”；
e、 笔划（）；
e、 beginPath（）；
e、 短跑
         var canvas = document.getElementById("canvas");
    var e = canvas.getContext("2d");
    function circle(e, color, x, y, radius, startAngle, endAngle, clockwise) {
        if (arguments.length < 9) return alert("Not enough arguments.\nThe function \"circle\" requires 9 arguments\nYou provided only " + arguments.length + ".");
        e.beginPath();
        e.arc(x, y, radius, startAngle, endAngle, clockwise);
        e.strokeStyle = color;
        e.stroke();
    }

    function draw(e, radius) {
        var deg360 = Math.PI * 2;
        circle(e, "#00688B", 225, 225, 165, deg360, 0, deg360, true);
        e.fillStyle = '#00688B';
        e.fill();
        circle(e, "#0099CC", 225, 225, 140, deg360, 0, deg360, true);
        e.fillStyle = '#0099CC';
        e.fill();
        circle(e, "#33A1DE", 225, 225, 115, deg360, 0, deg360, true);
        e.fillStyle = '#33A1DE';
        e.fill();
        circle(e, "#7EC0EE", 225, 225, 90, deg360, 0, deg360, true);
        e.fillStyle = '#7EC0EE';
        e.fill();
        circle(e, "#98CCE6", 225, 225, 65, deg360, 0, deg360, true);
        e.fillStyle = '#98CCE6';
        e.fill();
        e.closePath();
                 {
        e.closePath();

        e.stroke();
        e.strokestyle = "Black";
        e.beginPath();
        e.linewidth = "17";
        e.moveTo(225, 225);
        e.lineTo(320, 175);
        e.strokestyle = "Black";
        e.stroke();

        e.beginPath();
        e.setLineDash([2]);
        e.lineto(111, 322)
        e.stroke();



        circle(e, "#E6E8FA", 225, 225, 45, deg360, 0, deg360, true);
        e.fillStyle = '#E6E8FA';
        e.fill();
        e.fill();
        e.fillStyle = "black"; // font color to write the text with
        e.font = radius * 0.18 + "px arial";
        e.textBaseline = "middle";
        e.textAlign = "center";
        e.fillText(0, radius, e);
        for (num = 0; num < 25; num++) {

            ang = num * Math.PI / 12;
            e.translate(225, 225);

            e.rotate(ang);
            e.translate(0, -radius);
            e.rotate(-ang);
            e.fillText(num.toString(), 0, 0);
            e.rotate(ang);
            e.translate(0, +radius);
            e.rotate(-ang);
            e.setTransform(1, 0, 0, 1, 0, 0);

        }


         }