用不同的顏色

我創建一個線圖中的鏈接http://www.worldwidewhat.net/2011/06/draw-a-line-graph-using-html5-canvas/用不同的顏色

在這裏，我要畫與差異顏色線HTML5畫布行，我試圖用beignPath（）插圖中的畫線。這裏是我使用的一段代碼

c.strokeStyle = '#f00'; 
c.beginPath(); 
c.moveTo(getXPixel(0), getYPixel(data.values[0].Y)); 

for(var i = 1; i < data.values.length; i ++) { 
    if(i > 2){ 
     c.strokeStyle = 'green'; 
     c.beginPath(); 
    } 
    c.lineTo(getXPixel(i), getYPixel(data.values[i].Y)); 
    c.stroke(); 
}

其實我得到一個不同的線條顏色，但它缺少「綠色」顏色的起始線描邊。請幫我解決這個問題

任何幫助將不勝感激。在此先感謝...

來源

2013-01-17 Anish

我能弄清楚這個問題我自己..我張貼的修復，如果有人需要它的未來。我做了一個c.moveTo以前的X，Y值。。和PBLM固定..

來源

2013-01-17 10:01:17 Anish

請仔細閱讀本http://html5tutorial.com/advanced-path-painting/#beginPath理解爲什麼你有這個問題，爲什麼你的解決方案修復它。 – Alex

<?php 
$r=100; 

$a1=90; 
$a1=180-$a1; 

$ry=60; 
$yb=60; 

$a2=180-(90+$ry); 
$a3=180-(90+$ry+$yb); 

//subtract only x coordinate from x2; 
$x=150; 
$y=150; 

$x1=150-cos(deg2rad($a1))*$r; 
$y1=150-sin(deg2rad($a1))*$r; 

$x2=150-cos(deg2rad($a2))*$r; 
$y2=150-sin(deg2rad($a2))*$r; 
$x2e=$x2-tan(deg2rad($a2)); 
$y2e=((($x2e-$x2)*($y2-$y))/($x2-$x))+$y2; 


$x3=150-cos(deg2rad($a3))*$r; 
$y3=150-sin(deg2rad($a3))*$r; 

echo" 
<!DOCTYPE html> 
<html><head><style> 
#i01{ 
    background color:red; 
    width=350; 
    height=350; 

} 

</style></head> 
<body> 


<canvas id='myCanvas' width='300' height='300' style='border:1px solid #d3d3d3;' > 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 

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

ctx.beginPath(); 
ctx.arc(150, 150, $r, 0, 2 * Math.PI); 
ctx.stroke(); 


//ctx.moveTo(150,150); 
//ctx.lineTo(200,150); 

ctx.beginPath(); 
ctx.moveTo($x,$y); 
ctx.lineTo($x1,$y1); 
ctx.font = '20px Arial'; 
ctx.fillText('R',$x1,$y1); 
ctx.strokeStyle = 'red'; 
ctx.stroke(); 

ctx.beginPath(); 
ctx.moveTo($x,$y); 
ctx.lineTo($x2,$y2); 
ctx.strokeStyle = 'yellow'; 
ctx.font = '20px Arial'; 
ctx.fillText('Y',$x2,$y2); 
ctx.stroke(); 

ctx.beginPath(); 
ctx.moveTo($x,$y); 
ctx.lineTo($x3,$y3); 
ctx.font = '20px Arial'; 
ctx.fillText('B',$x3,$y3); 
ctx.strokeStyle = 'blue'; 
ctx.stroke(); 


</script> 


</body> 
</html>"; 
?>

來源

2017-09-23 04:34:05

用不同的顏色

回答

相關問題