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

上記のコードは、キャンバスに線を生成します。ラインは一色ですが、はじめはどの市町村でも色が違ったりしたいです。コードが機能しません: (なぜ?. 修正方法?

4

1 に答える 1

8

パスの作成中に色を変更しても、何も起こりません。色はstroke()が呼び出されたときに 1 回だけ適用されるため、最後strokeStyleに設定した色が線全体の色になります。

beginPath()、moveTo()、lineTo()などはパスを作成するだけで、そのパス自体には色がありません。そのパスをなぞったり塗りつぶしたりしても、単一の色しか適用されません。

複数の色のパスが必要な場合は、次の 2 つのいずれかを行う必要があります。

パスを開始し、いくつかの線を描き、1 つの色でストロークしてから、別の色でストロークされる別のパスを開始します。言い換えると：

// 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 を使用することもできます

于 2012-05-13T15:37:08.353 に答える