ラインを赤と青にする方法は？

Question

私はパス化のために正常に動作しているthis code、持っている：

をしかし、私はREDとエンドラインBLUEを始める必要がある、私はcontext.strokeStyle =「ブルー」を入れてみました。それは失敗しました。

どうすればいいのですか？

canvas.width = canvas.height = 500; 
var context = canvas.getContext('2d'); 
var shape = new Path2D(); 

function init(){ 
context.lineWidth = 1; 
context.strokeStyle = 'red'; 


// RED RED RED 
shape.moveTo(100,20); 
shape.lineTo(200, 160); 
shape.quadraticCurveTo(0, 200, 250, 120); 
shape.bezierCurveTo(290, -40, 300, 200, 400, 150); 


// BLUE BLUE 
//---- make this BLUE BLUE BLUE BLUE not RED RED RED 
//---- make this BLUE BLUE BLUE BLUE not RED RED RED 
// line 2 
//---- make this BLUE BLUE BLUE BLUE not RED RED RED 
//---- make this BLUE BLUE BLUE BLUE not RED RED RED 
shape.lineTo(500, 90); 

draw(); 
}  

var pos = 0; 
var l = 760; 
function draw() { 
    context.clearRect(0,0,canvas.width, canvas.height); 
    context.setLineDash([pos, l-pos]); 
    context.stroke(shape); 
    pos = pos+3; 
    if(pos >= l){ 
     blink(); 
     return; 
     } 
    requestAnimationFrame(draw); 
}; 
var i = 0; 
function blink(){ 
    context.clearRect(0,0,canvas.width, canvas.height); 
    if((++i % 30) > 15){ 
     context.stroke(shape); 
     } 

    requestAnimationFrame(blink); 
    }; 
init(); 

Answer 1

グラデーションスタイルストローク

var gradient=context.createLinearGradient(0,0,170,0); 
gradient.addColorStop("0","magenta"); 
gradient.addColorStop("0.5","blue"); 
gradient.addColorStop("1.0","red"); 

// Fill with gradient 
context.strokeStyle=gradient; 
context.lineWidth=5; 

http://www.w3schools.com/tags/canvas_strokestyle.asp

Answer 2

使用所望の色を達成するためにcanvas APIのstrokeStyleプロパティを使用します。ここに例があります：

var ctx=c.getContext("2d"); 
ctx.strokeStyle="#0000FF"; // Change color to blue 
ctx.strokeRect(20,20,150,100); 

青い矩形を描きます。

Path2Dを使用しているため、異なるを使用して異なるcolorsを描画する必要があります。

アニメーションでこれを実現する例を以下に示します。この方法それは使いやすいです

1. を使用しての

   <canvas id="canvas" style="border:1px solid;"> 
   </canvas> 
   
   <script> 
   var canvas=document.getElementById("canvas"); 
   canvas.width = canvas.height = 600; 
   var context = canvas.getContext('2d'); 
   
   // Array of shapes which has different colors 
   var shapes = [ new Path2D(), // RED shape 
          new Path2D() // BLUE shape 
   ]; 
   
   // Parallel Array to store color for each shape 
   var colors = [ 
          "#ff0000", // RED 
          "#0000ff" // BLUE 
   ]; 
   
   // Parallel Array to store length of each shape 
   var length_of_shapes =[ 
       644,  // Approx Length of RED shape 
       116   // Length of Blue shape 
   ]; 
   
   var pos=0;  // Position 
   
   var l=0;  // Total length 
   
   function init(){ 
       context.lineWidth = 1; 
   
       // RED Shape 
       shapes[0].moveTo(100,20); 
       shapes[0].lineTo(200, 160); 
       shapes[0].quadraticCurveTo(0, 200, 250, 120); 
       shapes[0].bezierCurveTo(290, -40, 300, 200, 400, 150); 
   
       // BLUE Shape 
       shapes[1].moveTo(400, 150); 
       shapes[1].lineTo(500, 90); 
   
       calcTotalLength(); 
       draw(); 
   }  
   
   
   // Function to calculate total length 
   function calcTotalLength(){ 
       for (var i = 0; i < length_of_shapes.length; i++) { 
        l+=length_of_shapes[i]; 
       }; 
   } 
   
   
   // Function to draw a shape at index i 
   function drawShape(i){ 
       context.strokeStyle = colors[i]; 
       context.stroke(shapes[i]); 
   } 
   
   
   function draw() { 
       var length_of_prev_shapes=0; 
   
       context.clearRect(0,0,canvas.width, canvas.height);  // Clear the canavas 
   
       for (var i = 0; i < shapes.length; i++) { 
        if(pos < (length_of_prev_shapes + length_of_shapes[i])){  // If the current shape is still drawing 
   
         // Is this the first shape then position is pos else it is the remainder of pos divided by length_of_prev_shapes 
         var tmpPos=(length_of_prev_shapes !== 0) ? (pos % length_of_prev_shapes) : pos; 
   
         context.setLineDash([ tmpPos, (length_of_shapes[i] - tmpPos) ]);  // Add drawing effect 
   
         drawShape(i);  // Draw Shape at i 
   
         // If the current shape is still drawing no point in looping through all other shapes so break 
         break;  
        }else{       
         context.setLineDash([0]); // Remove the drawing effect 
   
         // Add the length of the current shape to the length of all other drawn shapes 
         length_of_prev_shapes += length_of_shapes[i]; 
   
         drawShape(i);  // Draw Shape at i 
        } 
       }; 
   
       pos+=3;  // Increase position by 3 
   
       // If all the points are drawn i.e the position is greater than length 
       if(pos >= l){ 
        blink(); // Blink 
        return; 
       } 
   
       requestAnimationFrame(draw); 
   } 
   
   var i = 0; 
   function blink(){ 
       context.clearRect(0,0,canvas.width, canvas.height); 
       if((++i % 30) > 15){ 
        for(var j=0;j < shapes.length;j++){ 
         drawShape(j); 
        } 
       } 
       requestAnimationFrame(blink); 
   } 
   init(); 
   </script> 
   

   利点。

2. よく分かっているので分かりやすいです。
3. それは質問が求めている正確な効果を与えるでしょう。

この方法の欠点

1. あなたはまずここでは取り上げられていないすべてのshapeのlengthを見つける必要があります。
2. カーブの長さを見つけることは少し威圧することができます。
3. animationのspeedはdraw機能はあまり頻繁に呼び出されるようになりますcurvesのlengthのaccuracyに依存します。
4. shapeの部分のcolorを変更するには、別のshapeを定義する必要があります。

More details here!

An ExamplePath2D