效果图：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <title>canvas画箭头demo</title>
  4. <body>
  5.     <canvas id="canvas" width="200" height="200" style="border:1px dotted #d3d3d3;"></canvas>
  6.     <script>
  7.          var canvas=document.getElementById("canvas");
  8.         var context=canvas.getContext("2d");
  9.  
  10.         function Line(x1,y1,x2,y2){
  11.             this.x1=x1;
  12.             this.y1=y1;
  13.             this.x2=x2;
  14.             this.y2=y2;
  15.         }
  16.         Line.prototype.drawWithArrowheads=function(ctx,type){
  17.  
  18.             // 设置箭头样式
  19.             ctx.strokeStyle="black";
  20.             ctx.fillStyle="black";
  21.             ctx.lineWidth=3;
  22.  
  23.             // 画线
  24.             ctx.beginPath();
  25.             ctx.moveTo(this.x1,this.y1);
  26.             ctx.lineTo(this.x2,this.y2);
  27.             ctx.stroke();
  28.  
  29.             if(type == 1){
  30.                 // 画向上的箭头
  31.                 var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
  32.                 startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/-180;
  33.                 this.drawArrowhead(ctx,this.x1,this.y1-5,startRadians);
  34.             }else{
  35.                 // 画向下的箭头
  36.                 var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
  37.                 endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/-180;
  38.                 this.drawArrowhead(ctx,this.x2,this.y2+5,endRadians);
  39.  
  40.             }
  41.         }
  42.         Line.prototype.drawArrowhead=function(ctx,x,y,radians){
  43.             ctx.save();
  44.             ctx.beginPath();
  45.             ctx.translate(x,y);
  46.             ctx.rotate(radians);
  47.             ctx.moveTo(0,0);
  48.             ctx.lineTo(5,20);
  49.             ctx.lineTo(-5,20);
  50.             ctx.closePath();
  51.             ctx.restore();
  52.             ctx.fill();
  53.         }
  54.  
  55.         // 创建一个新的箭头对象
  56.         var line=new Line(50,50,50,155);
  57.         var line1=new Line(60,50,60,155);
  58.         // 第二个参数为1则箭头向上，不为1则箭头向下
  59.         line.drawWithArrowheads(context,1);
  60.         line1.drawWithArrowheads(context,2);
  61.     </script>
  62. </body>
  63. </html>

canvas画箭头demo的更多相关文章

  1. android 使用Canvas画箭头

    public class MyCanvas extends View{        private Canvas myCanvas;    private Paint myPaint=new Pai ...

  2. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  3. html5 canvas画流程图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  5. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  6. WPF画箭头

    简介 参考Using WPF to Visualize a Graph with Circular Dependencies的基础上写了一个WPF画箭头的库. 效果图如下: 使用的XAML代码如下: ...

  7. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  8. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  9. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

随机推荐

  1. GreenPlum 锁表以及解除锁定

    最近遇到truncate表,无法清理的情况,在master节点查看加锁情况,并未加锁这种情况极有可能是segment节点相关表加了锁,所以遇到这种情况除了排查master节点的锁,所有的segment ...

  2. mybatis执行insert后马上能获取自增主键的语句写法

    <!--keyColumn keyProperty useGeneratedKeys 用于在插入数据后,能直接使用user.getId()获取主键--> <insert id=&qu ...

  3. [other] Div

    https://www.luogu.org/problemnew/show/U16765 解法一 随机输出一组合法解. 复杂度 O(1) 预计得分 10~??? 解法二 看完题目基本能想到大力贪心,通 ...

  4. luogu P1382 楼房

    二次联通门 : luogu P1382 楼房 /* luogu P1382 楼房 线段树 + 扫描线 + 离散化 正解貌似是堆... MMP...二段式线段树各种错误... 离散化一下横坐标 扫描线扫 ...

  5. 代码 | 自适应大邻域搜索系列之(7) - 局部搜索LocalSearch的代码解析

    前言 好了小伙伴们我们又见面了,咳咳没错还是我.不知道你萌接连被这么多篇代码文章刷屏是什么感受,不过,酸爽归酸爽.今天咱们依然讲代码哈~不过今天讲的依然很简单,关于局部搜索LocalSearch的代码 ...

  6. ZR#957

    ZR#957 解法: 首先 $ T $ 必须得要是 $ S $ 的子序列,不然不存在好的下标序列,因此一定无解. 考虑判断一个串 $ T $ 是不是 $ S $ 子序列的贪心做法:每次从没有匹配的位置 ...

  7. mysql远程访问设置

    MySQL GUI Tools 开启mysql的远程访问权限 默认mysql的用户是没有远程访问的权限的,因此当程序跟数据库不在同一台服务器上时,我们需要开启mysql的远程访问权限. 主流的有两种方 ...

  8. 调整 全局jvm 大小 tomcat 调整jvm大小

    z最近公司换了一个线上的windows服务器,原来的内存48g,现在2g.项目启动报内存不足.又重新安装jre 安装jre 教程链接:(谢谢各位博友) https://www.genban.org/t ...

  9. LeetCode 第 149 场周赛

    成绩 一.一年中的第几天(LeetCode-1154) 1.1 题目描述 1.2 解题思路 比较容易的一题,搞清楚平年.闰年的判定规则,就很容易做出来. 1.3 解题代码 class Solution ...

  10. 认识wsgi

    WSGI是什么? WSGI,全称 Web Server Gateway Interface,或者 Python Web Server Gateway Interface ,是为 Python 语言定义 ...