效果图：

代码：

  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. 二十一.构建memcached服务、LNMP+memcached、PHP的本地Session信息、PHP实现session共享

    proxy client web1 web2   1.构建memcached服务 ]# yum -y install memcached ]# cat /etc/sysconfig/memcached ...

  2. ueditor从word粘贴公式

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  3. learning scala Function Recursive Tail Call

    可以使用scala库,可以从字面上看出是在调用 递归函数: code import scala.util.control.TailCalls._ val arrayDonuts: Array[Stri ...

  4. 关于 js 函数参数的this

    先看一道面试题: var number = 10; function fn() { console.log(this.number); } var obj = { number: 2, show: f ...

  5. JDK8中好用的日期处理-LocalDate类-LocalTime-LocalDateTIme，mysql解决时区相差13小时的问题，日期格式器DateTimeFormatter

    set global time_zone='+08:00'; set time_zone = '+08:00'; show variables like '%time_zone:'

  6. [luogu P1527]矩阵乘法（矩形k小）

    传送门 Description 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. Solution 整体二分 练习一波... 就是一堆询问放在一起二分 另外的,第一次发现原来矩 ...

  7. CF1174D Ehab and the Expected XOR Problem(二进制)

    做法 求出答案序列的异或前缀和\(sum_i\),\([l,r]\)子段异或和可表示为\(sum_r\bigoplus sum_{l-1}\) 故转换问题为,填\(sum\)数组,数组内的元素不为\( ...

  8. zabbix (11) 监控TCP连接数

    对TCP的监控可以采用ss.netstat./proc/net/tcp这三个不同的方案来实现.其中ss是最快的 (1)ss命令 [root@manager1 script_py ::]#time ss ...

  9. stdu1309(不老的传说)

    题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index/problemdetail/pid/1309.html 不老的传说问题 Ti ...

  10. meshing-做类似ICEM的Y型剖分

    ​原视频下载地址:https://yunpan.cn/cqjeKkrhwwN3x  访问密码 c724