Question

有没有办法让路径的不同段具有不同的属性，尤其是颜色？我想做的是类似下面的代码，但是这段代码只会记住最后选择的颜色。我可以将它分解为单独的路径但是我失去了使用行连接属性创建平滑线的能力。

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

ctx.beginPath();     
ctx.lineWidth = 1;
ctx.moveTo(50, 50);
ctx.strokeStyle = "#ff0000";    // sets the color
ctx.lineTo(300, 150);
ctx.strokeStyle = "#00ff00";    // overrides color. 
ctx.lineTo(50, 300);
ctx.closePath();
ctx.stroke();

Answer 1

没有。每个路径只有一组样式（==最后一个样式）。

但即使使用lineJoin多个笔划颜色，也会在视觉上打破折线。

无论如何，也许使用lineCap代替lineJoin。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.lineCap='round';
ctx.lineWidth=6;

drawSegment(20,40,80,20,'red');
drawSegment(80,20,140,40,'green');
drawSegment(140,40,35,140,'blue');


function drawSegment(x0,y0,x1,y1,strokeColor){
  ctx.beginPath();
  ctx.moveTo(x0,y0);
  ctx.lineTo(x1,y1);
  ctx.strokeStyle=strokeColor;
  ctx.stroke();
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

在HTML Canvas中，单个路径可以具有不同的笔触属性吗？

1 个答案: