在畫布上同時畫兩條線

-2

所以我的情況如下：我有一組數據，每個條目都有一個最大數和最小數。在畫布上同時畫兩條線

我在畫布的幫助下可視化了這些數據。我試圖循環數據並創建兩行，一行爲最小值，一行爲最大值。對於這兩個工作中的一個很好，但是我不能創建兩行沒有循環數據兩次。

函數lineTo（）只是從最後一點開始畫一條線。使用這意味着一條線將在最小值和最大值之間曲折。

有沒有辦法讓兩個'鋼筆'同時畫出不同的線條？

來源

2017-08-29 Jos Vlaar

我不認爲在Canvas API中有這個功能。

但是你可以遵循下一個算法：

ctx.beginPath() 
ctx.moveTo(line_1_x1, line_1_y1) 
ctx.lineTo(line_1_x2, line_1_y2) 
ctx.stroke() 
ctx.closePath() 

ctx.beginPath() 
ctx.moveTo(line_2_x1, line_2_y1) 
ctx.lineTo(line_2_x2, line_2_y2) 
ctx.stroke() 
ctx.closePath()

潛在的，你可以把它的功能包：

function drawLine(ctx, x1, y1, x2, y2) { 
    ctx.beginPath() 
    ctx.moveTo(x1, y1) 
    ctx.lineTo(x2, y2) 
    ctx.stroke() 
    ctx.closePath() 
}

完整的示例（On JSFiddle）：

function drawLine(ctx, x1, y1, x2, y2) { 
 
    ctx.beginPath() 
 
    ctx.moveTo(x1, y1) 
 
    ctx.lineTo(x2, y2) 
 
    ctx.stroke() 
 
    ctx.closePath() 
 
} 
 

 
let canvas = document.getElementById('canvas') 
 
let ctx = canvas.getContext('2d') 
 

 
drawLine(ctx, 50, 100, 100, 200) 
 
drawLine(ctx, 100, 50, 200, 100)

<canvas id='canvas' width='400' height='400'></canvas>

來源

2017-08-29 12:27:51

var canvas = document.getElementById('c'); 
 
var ctx = canvas.getContext('2d'); 
 
var Point = function(x,y){ 
 
this.x = x; 
 
this.y = y; 
 
} 
 

 
drawLine(new Point(10,10),new Point(100,100),'red'); 
 
drawLine(new Point(60,10),new Point(150,150),'green'); 
 

 

 
function drawLine(stPoint, endPoint,color){ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(stPoint.x,stPoint.y); 
 
    ctx.lineTo(endPoint.x,endPoint.y); 
 
    ctx.strokeStyle = color; 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
}

canvas{ 
 
border:2px dotted blue; 
 
}

<canvas id='c' width='300' height='300'></canvas>

您可以使用beginPath()來創建新的路徑。並使用closePath()關閉路徑。

來源

2017-08-29 12:29:01 Durga

您是否在繪製一條線之後使用了context.moveTo（）？從它離開的地方畫出一條線的原因是因爲您的畫布移動到了第2行的一個點（x1，y1），並且如果您在不調用moveTo的情況下再次使用lineTo（），它將從x1，y1中繪製。所以在使用一行之後使用moveTo（）。例如：

ctx.beginPath(); 
ctx.moveTo(x1, y1);

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.moveTo(0, 0); 
 
ctx.lineTo(200, 100); 
 
ctx.moveTo(10, 50); 
 
ctx.lineTo(150, 100); 
 
ctx.stroke();

<html> 
 
<body> 
 

 
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
</canvas> 
 

 
</body> 
 
</html>

ctx.beginPath(); 
ctx.moveTo(x1, y1) 
ctx.lineTo(min_x1, min_y1); 
ctx.moveTo(x2, y2); 
ctx.lineTo(max_x2, min_y2); 
ctx.stroke();

來源

2017-08-29 12:39:34 user8532608

在畫布上同時畫兩條線

回答

相關問題