Question

以下代码创建了3个由箭头连接的椭圆形圆。为什么最后一个箭头的颜色改变了第一个箭头和第三个形状的半圆？

第一个箭头应为黑色，而第三个箭头应为全灰色。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

function canvas_arrow(context, fromx, fromy, tox, toy, color) {
    context.lineWidth = 2; 
    context.strokeStyle = color;   
    var headlen = 10;   
    var angle = Math.atan2(toy - fromy, tox - fromx);
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    context.moveTo(tox, toy);
    context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));    
    context.stroke(); 
}

function canvas_shape(context, rowIDX, colIDX, boxWidth, boxHeight, sizeTextFont) {
    var box_shift = boxWidth + space; //boxWidth + arrowLength
    var box_shift_vert = boxHeight + space; //boxWidth + arrowLength

    var r = boxHeight / 3;//radius
    var l = boxWidth - 2*r; //line lentght
    var x = box_shift * (colIDX - 1) + r;
    var y = box_shift_vert * (rowIDX - 1) + r * 1.5;

    context.beginPath();        
    context.arc(x, y, r, Math.PI * 0.5, Math.PI * 1.5, false); 
    context.closePath();
    context.fillStyle = "grey";
    context.fill();

    context.beginPath();
    context.arc(x + l, y, r, Math.PI * 0.5, Math.PI * 1.5, true); 
    context.closePath();
    context.fillStyle = "grey";
    context.fill();

    //BOX
    context.fillStyle = "grey";
    context.fillRect(x, y - r, l, 2*r); 
    context.fill();

}

//------------------------------------------------------------------------------------
var canvas = document.getElementById("myCanvas");
var draw = canvas.getContext("2d");
var arrowContext = canvas.getContext("2d");

var boxWidth=120;
var boxHeight=60;
var sizeTextFont=20;
var space=40;

canvas_shape(draw, 1, 1, boxWidth, boxHeight, sizeTextFont);
canvas_shape(draw, 1, 2, boxWidth, boxHeight, sizeTextFont);
canvas_shape(draw, 1, 3, boxWidth, boxHeight, sizeTextFont);

//Arrow 1-2
 var rowIDXfrom=1, colIDXfrom=1;
 var rowIDXto=1, colIDXto=2;
 var fromx = (colIDXfrom) * (boxWidth) + (colIDXfrom - 1) * (space);
 var fromy = (rowIDXfrom - 1) * (boxHeight + space) + (boxHeight / 2); 
 var tox = (colIDXto - 1) * (boxWidth + space);
 var toy = (rowIDXto - 1) * (boxHeight + space) + (boxHeight / 2);
 canvas_arrow(draw, fromx, fromy, tox, toy, "black");

//Arrow 2-3
 var rowIDXfrom=1, colIDXfrom=2;
 var rowIDXto=1, colIDXto=3;
 var fromx = (colIDXfrom) * (boxWidth) + (colIDXfrom - 1) * (space);
 var fromy = (rowIDXfrom - 1) * (boxHeight + space) + (boxHeight / 2); 
 var tox = (colIDXto - 1) * (boxWidth + space);
 var toy = (rowIDXto - 1) * (boxHeight + space) + (boxHeight / 2);
 canvas_arrow(draw, fromx, fromy, tox, toy, "red");

</script>


</body>
</html>

您能在这里帮助我吗？提前谢谢了。发布问题时，stackoverflow显示错误，提示“看起来您的问题主要是代码”，但我认为这很清楚...

JavaScript-画布：为什么最后一个箭头的颜色会更改所有箭头和半圆？

0 个答案: