如何更改線條顏色和半虛線

Question

[我正在線條上繞一圈，但我無法將線條顏色更改爲黑色。它不斷向我展示白線。

還有一件事，我希望我的線半點和半正常像我已附加的圖像。

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

     } 


     } 

Answer 1

中風color.you使用e.strokestyle，但它應該是e.strokeStyle。

var canvas = document.getElementById("canvas"); 
 
var e = canvas.getContext("2d"); 
 
draw(e, 50); 
 

 
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.beginPath(); 
 
    e.strokeStyle = "black"; 
 
    e.linewidth = "17"; 
 
    e.moveTo(225, 225); 
 
    e.lineTo(320, 175); 
 
    e.strokeSstyle = "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); 
 

 
    } 
 

 

 
    } 
 
}

<canvas id="canvas" width="400" height="500" class="playable-canvas"></canvas>

半虛線，你必須找到線的中點，繪製一個半正常的行程，另一半通過設置setLineDash。 看到的例子

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
halfDotLine(0, 0, 100, 100, ctx); 
 

 
function halfDotLine(x1, y1, x2, y2, ctx) { 
 
    ctx.lineWidth = 3; 
 
    ctx.strokeStyle = "#FF0000"; 
 

 
    ctx.beginPath(); 
 
    // calculate the midpoint of the line and draw half line with normal stroke from midpoint to end 
 
    ctx.moveTo((x1 + x2)/2, (y1 + y2)/2); 
 
    ctx.lineTo(x2, y2); 
 
    ctx.stroke(); 
 
    
 
    // for dotted line draw the line by setting linedash array from start to midpoint. 
 
    ctx.setLineDash([3, 3]); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(x1, y1); 
 
    ctx.lineTo((x1 + x2)/2, (y1 + y2)/2); 
 
    ctx.stroke(); 
 
}

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>

Answer 2

strokeStyle是區分大小寫的！

當你寫e.strokestyle = "Black";，JavaScript不抱怨。但你什麼也得不到。只需更改爲e.strokeStyle = "Black";。