HTML5圈子和箭头与渐变背景

Question

我需要HTML5中的一个函数，在给定的上下文中，x1，y1，x2，y2会画一个圆（在此向量的开头），箭头代表向量本身，具有渐变背景。左图是我得到的 - 我对结果不满意......右图是我想要制作的图像。

有人可以帮我吗？

这是我的箭头功能（圆圈很明显）：

function arrow(context, fromx, fromy, tox, toy){
    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));
}

Answer 1

好的，我会咬人......

如果您的箭头功能现在正常工作，您还可以在该功能中绘制一个圆圈。

此修改后的箭头（）将以灰色绘制圆圈和箭头。

由于您想要更改上下文状态（将填充/笔划更改为灰色），您应该在context.save和context.restore中包装路径绘图命令。

你应该（必须！）使用context.beginPath开始所有原子路径图。这可以防止路径图无意中重复。

您的箭头重构使用上下文变换将旋转点设置为x1，y1，然后绘制圆圈，然后将箭头绘制为x2，y2。

演示：http://jsfiddle.net/m1erickson/87T8d/

示例箭头功能：

function arrow(x1,y1,x2,y2){
    var dx=x2-x1;
    var dy=y2-y1;
    var radians=Math.atan2(dy,dx);
    var length=Math.sqrt(dx*dx+dy*dy);
    // save the unrotated context state
    ctx.save();
    // set the rotation point as x1,y1
    ctx.translate(x1,y1);
    // rotate the canvas by the angle of the vector
    ctx.rotate(radians);
    // draw the circle
    ctx.beginPath();
    ctx.arc(0,0,8,0,Math.PI*2);
    ctx.closePath();
    ctx.fillStyle="gray";  // or gradient if you prefer
    ctx.fill();
    // draw the arrow
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(length,0);
    ctx.lineTo(length-7,-4);
    ctx.lineTo(length-7,4);
    ctx.lineTo(length,0);
    ctx.closePath();
    ctx.fillStyle="gray";
    ctx.fill();
    ctx.strokeStyle="gray";
    ctx.stroke();
    // restore the context to its unrotated state
    ctx.restore();
}