ドロー

Question

私は色の異なる2つの長方形を描くしようとしています：

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
context.beginPath(); 
context.drawImage(this,0,0); 
context.beginPath(); 
context.rect(left1,top1,width1,height1); 
context.lineWidth = 8; 
context.strokeStyle = 'red'; 
context.stroke(); 
context.rect(left2,top2,width2,height2); 
context.lineWidth = 8; 
context.strokeStyle = 'green'; 
context.stroke(); 

をしかし、両方とも同じ色（選択した第二の色である緑を）出てきます。

strokeは、私が期待していることをしていないと思います。

私はここで何が欠けているのか説明してもらえますか？

ありがとうございます。

Answer 1

トリックは、あなたは、単に第二の正方形を作成する前にcontext.beginPath()をコールする必要があるということです。厳密には必要ではないが

は、あなたはまた、完全に（context.stroke()前と呼ばれている）だけでなくcontext.closePath()であなたのパスを閉じる必要があります。

私は、次の例にcontext.beginPath()とcontext.closePath()の両方を追加しました：

var canvas = document.getElementById('canvas'); 
 
var context = canvas.getContext('2d'); 
 
//context.beginPath(); 
 
//context.drawImage(this, 0, 0); 
 
context.beginPath(); 
 
context.rect(30, 30, 30, 30); /* Modified */ 
 
context.lineWidth = 8; 
 
context.strokeStyle = 'red'; 
 
context.closePath(); 
 
context.stroke(); 
 
context.beginPath(); /* Added */ 
 
context.rect(80, 30, 30, 30); /* Modified */ 
 
context.lineWidth = 8; 
 
context.strokeStyle = 'green'; 
 
context.closePath(); 
 
context.stroke();

<canvas id="canvas" width="150" height="100" style="border:1px solid #000000;"> 
 
</canvas>

は、この情報がお役に立てば幸い！ :)

Answer 2

この例を見て

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

 
// Red rectangle 
 
ctx.beginPath(); 
 
ctx.lineWidth = "6"; 
 
ctx.strokeStyle = "red"; 
 
ctx.rect(5, 5, 290, 140); 
 
ctx.stroke(); 
 

 
// Green rectangle 
 
ctx.beginPath(); 
 
ctx.lineWidth = "4"; 
 
ctx.strokeStyle = "green"; 
 
ctx.rect(30, 30, 50, 50); 
 
ctx.stroke();

<canvas id="myCanvas" width="300" height="150">