且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在画布标签上绘制箭头

更新时间:2023-11-23 23:26:40

你必须先添加context.beginPath()和追加context.stroke():

As simple as I can get it. You'll have to prepend context.beginPath() and append context.stroke() yourself:

function canvas_arrow(context, fromx, fromy, tox, toy){
    var headlen = 10;   // length of head in pixels
    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));
}

下面是一个示例:
http://stuff.titus-c.ch/arrow.html