canvas中没有提供绘制箭头的函数，需要自己手动绘制，幸好箭头并不复杂，简单来说箭头由三条线段组成，如下图所示，线段AB、BC和BD，关键在于在给定端点A和B的坐标情况下，如何计算点C和D的坐标。

这里有两个思路可供参考，如下

思路一，利用线段

首先，在线段AB上确定一个点P，接着经过P点画一条直线与AB垂直，最后在直线P点两端确定C和D点。

确定P点坐标，利用三角形相似得，

计算得P的横坐标xp = xb - (xb-xa)*|BP|/|BA|，同样纵坐标yp = yb - (yb-ya)*|BP|/|BA|。

确定直线CD，直线CD垂直于AB，所以：CD斜率*AB斜率=-1，CD斜率k=(xa-xb) / (yb-ya)。

点p经过直线CD，将P点坐标带入斜截式直线方程y=kx+b，得b=yp - k*xp。

确定C点和D点，令线段|CP|的长度为d，根据距离公式计算C和D的坐标即可，但公式很复杂，没推导出来，所以换一个思路：在直线CD上确定一个Q点（Q点横坐标为xa），则C点的坐标与P点坐标计算类似。

此思路需要单独处理直线平行于坐标轴的情况，代码如下：

    var x3 = 0, y3 = 0;var x4 = 0, y4 = 0;var d1 = 20;  // BP的长度var d3 = d1/2; // CP的长度var d2 = Distance(x1, y1, x2, y2); // 求距离var x5 = (x2 - d1 * (x2 - x1) / d2); // P点(x5,y5)var y5 = (y2 - d1 * (y2 - y1) / d2);if (x1 == x2) {x3 = x5 - d3;x4 = x5 + d3;y3 = y5;y4 = y5;} else if (y1 == y2) {x3 = x5;x4 = x5;y3 = y5 - d3;y4 = y5 + d3;} else {var k = (x1 - x2) / (y2 - y1);var b = y5 - k * x5;var x6 = x1;  // Q点(x6,y6)var y6 = k * x6 + b;var d4 = Distance(x5, y5, x6, y6);x3 = (x5 - d3 * (x5 - x6) / d4);    y3 = (y5 - d3 * (y5 - y6) / d4);    x4 = (x5 + d3 * (x5 - x6) / d4);y4 = (y5 + d3 * (y5 - y6) / d4);    }

思路二，利用夹角

线段BC的长度记为L，即|BC|=|BD|=L，记∠ABD为θ，则点D的坐标计算如下：

同理，C的坐标xc = xb - L × cos(α-θ)，yc = yd - L × sin(α-θ)。

其中tan(α) = (yb - ya) / (xb - xa)，所以α = Math.atan((yb - ya) / (xb - xa))，由于分母有可能是0，所以改用Math.atan2(yb - ya, xb - xa)计算。atan传入一个参数，atan2传入2个参数：分子和分母。

代码如下：

    var l = 20; // var a = Math.atan2((y2 - y1), (x2 - x1));var x3 = x2 - l * Math.cos(a + 30 * Math.PI/180); // θ=30var y3 = y2 - l * Math.sin(a + 30 * Math.PI/180);var x4 = x2 - l * Math.cos(a - 30 * Math.PI/180);var y4 = y2 - l * Math.sin(a - 30 * Math.PI/180);

最后绘图：

    context_.beginPath();context_.moveTo(x1, y1);context_.lineTo(x2, y2);context_.moveTo(x3, y3);context_.lineTo(x2, y2);context_.lineTo(x4, y4);context_.lineWidth = 5;context_.strokeStyle = "#000000";context_.stroke();

箭头如下：

错误绘图方式：

箭头顶端多一个歪斜的尖，不美观。

在canvas中绘制箭头相关推荐

html绘图环境,HTML_HTML5 在canvas中绘制文本附效果图，一、绘制文本在绘图环境中提 - phpStudy...
HTML5 在canvas中绘制文本附效果图一.绘制文本在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fill ...
矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
在Canvas中绘制圆角矩形
问题的提出要在Canvas中绘制一个矩形,使用strokeRect或fillRect函数即可. var canvas = document.getElementById("canvas&q ...
R语言使用rnorm函数生成正太分布数据、使用plot函数可视化折线图、使用arrows函数在可视化图像中绘制箭头曲线、绘制带箭头线段，可以设置箭头角度，有几个箭头（1起点箭头、2终点箭头，3双箭头）
R语言使用rnorm函数生成正太分布数据.使用plot函数可视化折线图.使用arrows函数在可视化图像中绘制箭头曲线.绘制带箭头线段,可以设置箭头角度,有几个箭头(1起点箭头.2终点箭头,3双箭头) ...
HTML5 Canvas中绘制贝塞尔曲线
绘制贝塞尔曲线贝塞尔曲线于1959年,由法国物理学家与数学家Paul de Casteljau所发明,于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,并用于汽车的车 ...
HTML5 Canvas中绘制圆弧
绘制圆弧圆弧被定义为假想的圆周上任意两点之间的部分.Canvas的API提供了两个绘制圆弧的方法:arc()和arcTo()方法. arc()方法使用arc()方法绘制圆弧时,假想的圆由圆心和半径 ...
html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
HTML5 Canvas中绘制文本
绘制文本画布中不仅可以绘制图形,还可以绘制文本.绘制文本,既可以使用填充方法,也可以使用勾勒方法: fillText(text, x, y, [maxWidth]) strokeText(text, ...

在canvas中绘制箭头

思路一，利用线段

思路二，利用夹角

最后绘图：

在canvas中绘制箭头相关推荐

最新文章

热门文章