效果图：

代码：

<!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. 011_GoldWave软件安装及使用

    (一)软件安装包: 链接:https://pan.baidu.com/s/15c5veooyA8bAYIAgLFOLjg提取码:jiis 复制这段内容后打开百度网盘手机App,操作更方便哦 (二)降低 ...

  2. sql server 数据类型转换

    --这是显示转换类型,将字符串转成整形SELECT CAST('1' AS int),CONVERT(int,'1')--SqlServer也会隐式转换,如:用字符串乘以一个整形,--整形优先级要大, ...

  3. sql server 事务和锁的作用

    事务 事务就是作为一个逻辑工作单元的SQL语句,如果任何一个语句操作失败那么整个操作就被失败,以后操作就会回滚到操作前状态,或者是上个节点.为了确保要么执行,要么不执行,就可以使用事务.而锁是实现事务 ...

  4. HSSFWorkbook 模版使用

    Java中导入.导出Excel 一.介绍当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用 ...

  5. Elasticsearch 使用：创建、插入、查询、更新、删除

    Elasticsearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上. Lucene 可能是目前存在的,不论开源还是私有的,拥有最先进,高性能和全功能搜索 ...

  6. 数据库学习之七--视图（View）

    一.定义 视图:指计算机数据库中的一个临时虚拟表,其内容由查询定义:同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在. 二.优点 1. 优点: a. ...

  7. codeforces626F

    CF626F Group Projects  有n个学生,每个学生有一个能力值ai.现在要把这些学生分成一些(任意数量的)组,每一组的“不和谐度”是该组能力值最大的学生与能力值最小的学生的能力值的差. ...

  8. Python3 输入和输出（一）

    1.输出格式美化 Python两种输出值的方式: 表达式语句和 print() 函数. 第三种方式是使用文件对象的 write() 方法,标准输出文件可以用 sys.stdout 引用. 如果希望输出 ...

  9. 树莓派4硬件---GPIO篇

    树莓派拿到手已经两个多月了,其实从最开始的期待安装好ROS,到前几天完成了ROS的源码编译安装,对linux的调教也时花了些时间的.现在终于想起来,树莓派上还有GPIO,还没有用过了.说干就干,开始. ...

  10. Java核心复习——synchronized

    一.概念 利用锁机制实现线程同步,synchronized关键字的底层交由了JVM通过C++来实现 Java中的锁有两大特性: 互斥性 同一时间,只允许一个线程持有某个对象锁. 可见性 锁释放前,线程 ...