效果图：

代码：

<!DOCTYPE html>

<html>

<title>canvas画箭头demo</title>

<body>

    <canvas id="canvas" width="200" height="200" style="border:1px dotted #d3d3d3;"></canvas>

    <script>

         var canvas=document.getElementById("canvas");

        var context=canvas.getContext("2d");

        function Line(x1,y1,x2,y2){

            this.x1=x1;

            this.y1=y1;

            this.x2=x2;

            this.y2=y2;

        }

        Line.prototype.drawWithArrowheads=function(ctx,type){

            // 设置箭头样式

            ctx.strokeStyle="black";

            ctx.fillStyle="black";

            ctx.lineWidth=3;

            // 画线

            ctx.beginPath();

            ctx.moveTo(this.x1,this.y1);

            ctx.lineTo(this.x2,this.y2);

            ctx.stroke();

            if(type == 1){

                // 画向上的箭头

                var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));

                startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/-180;

                this.drawArrowhead(ctx,this.x1,this.y1-5,startRadians);

            }else{

                // 画向下的箭头

                var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));

                endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/-180;

                this.drawArrowhead(ctx,this.x2,this.y2+5,endRadians);

            }

        }

        Line.prototype.drawArrowhead=function(ctx,x,y,radians){

            ctx.save();

            ctx.beginPath();

            ctx.translate(x,y);

            ctx.rotate(radians);

            ctx.moveTo(0,0);

            ctx.lineTo(5,20);

            ctx.lineTo(-5,20);

            ctx.closePath();

            ctx.restore();

            ctx.fill();

        }

        // 创建一个新的箭头对象

        var line=new Line(50,50,50,155);

        var line1=new Line(60,50,60,155);

        // 第二个参数为1则箭头向上，不为1则箭头向下

        line.drawWithArrowheads(context,1);

        line1.drawWithArrowheads(context,2);

    </script>

</body>

</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. 从设计稿到实现React应用（分类数据处理）

    1. 确定设计稿和数据 设计稿: 数据: [ {category: "Sporting Goods", price: "$49.99", stocked: tr ...

  2. CF938D Buy a Ticket dijkstra

    考试T1,建一个反图跑一个最短路就好了~ code: #include <bits/stdc++.h> #define ll long long #define N 200002 #def ...

  3. learning java 获取键盘输入

    通过Scanner类,获取键盘的输入 var sc = new Scanner(System.in); // while (sc.hasNext()){ // System.out.println(& ...

  4. centos7的redis加哨兵系统

    三台服务器 1.下载 wget http://download.redis.io/releases/redis-5.0.3.tar.gztar -zxvf redis-5.0.3.tar.gzcd r ...

  5. 基于Shiro的登录功能 设计思路

    认证流程 Shiro的认证流程可以看作是个“有窗户黑盒”, 整个流程都有框架控制,对外的入口只有subject.login(token);,这代表“黑盒” 流程中的每一个组件,都可以使用Spring ...

  6. P4514 上帝造题的七分钟——二维树状数组

    P4514 上帝造题的七分钟 求的是矩阵里所有数的和: 维护四个树状数组: #include<cstdio> #include<cstring> #include<alg ...

  7. rabbitmq 删除所有队列及服务重启脚本

    #!/bin/bash # 删除元数据 rm -rf /var/lib/rabbitmq/mnesia # 重启rabbitmq rabbitmqctl stop systemctl restart ...

  8. ansible handlers

    示例:安装nginx --- - hosts: hadoop #指定主机组 remote_user: root #远程执行命令的用户 gather_facts: no #是否获取远程主机的信息 tas ...

  9. Arts打卡第9周

    Algorithm.主要是为了编程训练和学习. 每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard). 进行编程训练,如果不训练你看再多的算法书,你依然不 ...

  10. AbstractRoutingDataSource动态数据源切换，AOP实现动态数据源切换

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/u012881904/article/de ...