在画布标签上绘制箭头

本文介绍了在画布标签上绘制箭头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想使用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)); }

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