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

上面的代码在画布中生成线条。线条是一种颜色，我想在开头或任何市政颜色是不同的。我的代码不起作用:(为什么？。如何修复它？

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

画布LineTo中的multicolors

1 个答案: