在画布标签上绘制箭头 [英] Draw arrow on canvas tag

问题描述

我想使用canvas标记，javascript来绘制箭头。我已经使用二次函数，但我有计算箭头的旋转角度的问题...

I want to draw an arrow using the canvas tag, javascript. I've made it using the quadratic function, but I'm having problems to calculate the angle of rotation of the arrow...

任何人都有这个线索吗？

Anyone have a clue on this?

谢谢

推荐答案

你必须先添加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

这篇关于在画布标签上绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！