Question

我正在链接http://www.worldwidewhat.net/2011/06/draw-a-line-graph-using-html5-canvas/

中创建折线图

这里我想用diff颜色绘制线条，我试图在线条绘制之间使用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();
}

实际上我得到的是一种衍射线颜色，但它错过了带有“绿色”颜色的起始线笔划。请帮我解决这个问题

任何帮助都将受到极大的赞赏。提前谢谢......

Answer 1

我能够找出问题我自己..如果有人将来需要它我发布修复..我做了一个c.moveTo到以前的X，Y值..并且pblm是固定的..

Answer 2

<?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>";
?>

HTML5 Canvas系列有不同的颜色

2 个答案: