画布中 LineTo 的多色问题。

Question

function TrackGraphic(model, canvas) {
    //TrackModel
    this._model = model;
    this.draw = function(context) {
        var dx = Math.cos(this._model.startAngle + Math.PI / 2);
        var dy = Math.sin(this._model.startAngle + Math.PI / 2);

        context.beginPath();
        context.lineWidth = 10;
        context.moveTo(this._model.offsetX, this._model.offsetY);
        //CurvePoint
        var p;
        for (var d = 0; d < this._model.length; d += 1) {
            if (d > 1000) {

                console.log('2F2F2F');
                context.strokeStyle = "#2F2F2F" //"rgb(255,165,0)"; //0x2F2F2F

            } else {
                context.strokeStyle = "#FFF" //"rgb(255,165,0)"; //0x2F2F2F;
                console.log('FFFFFF');


            }
            p = this._model.getTrackPoint(d);
            context.lineTo(this._model.offsetX + p.x, this._model.offsetY + p.y)
        }
        context.stroke();
    }
}​

以下代码产生了画布中的线条。线条是同一颜色，我想在开始或任何一个城市中都使用不同的颜色。我的代码不起作用:(为什么?如何修复？

- Piotr Stanek

---

使用渐变或直线段来绘制直线。 - Alex

Answer 1

在构建路径时改变颜色不会有任何效果。这个颜色只会应用一次，当调用 stroke() 时，因此最后你设置的 strokeStyle 将成为整条线的颜色。

beginPath()、moveTo()、lineTo() 等只是创建了一个路径，而路径本身没有颜色。对该路径进行描边或填充时，只会应用单一的颜色。

如果您想要一个包含多种颜色的路径，则必须执行以下两种操作之一：

开始一条路径，进行一些线条的绘制，用一种颜色进行描边，然后开始另一个路径，并用另一种颜色进行描边。换句话说：

// make a red line segment
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.strokeStyle = 'red';
ctx.stroke();
// Begin a new path and make this line segment green
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.strokeStyle = 'green';
ctx.stroke();
//etc

根据您的需求，您也可以使用线性渐变（linearGradient）。

- Simon Sarris

---

我已经做了这样的测试。以至于整个画布的颜色都是相同的... - Piotr Stanek