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

用于描边颜色。您使用的是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";。

如何改变线条颜色和半点线

2 个答案: