效果图：

代码：

<!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. 006_硬件基础电路_MOS管

    从文档中提取有用信息 链接:https://pan.baidu.com/s/1fR7ZyGDgapOdd-FtjQ6m8Q提取码:an11 复制这段内容后打开百度网盘手机App,操作更方便哦 判断三个 ...

  2. 批量给文件去BOM（百度网盘）

    链接:https://pan.baidu.com/s/1jC8RkyC0xX1lA-zZjOyDsw 提取码:geko 第一步:浏览你要移除BOM编码的文件夹.第二步:点击移除bom,随后会弹出提示框 ...

  3. Spring AOP的作用，动态代理模式

    AOP即面向切面编程.AOP是基于代理模式的. 代理模式: 当我们需要修改一个类,在类中加入代码时,为了不破坏这个类的封装性.可以使用代理模式,建立一个代理类. 比如:修改需求,在调用UserCont ...

  4. Queue Pair in RDMA （zz）

    Queue Pair in RDMA 首页分类标签留言关于订阅2018-03-21 | 分类 Network  | 标签 RDMA 一个CA(Channel Adapter)可以包含多个QP,QP相当 ...

  5. 找不到编译器：wepy-compiler-less

    npm install less 后再 npm install wepy-compiler-less 解决

  6. 数据结构实验之查找一：二叉排序树 （SDUT 3373）

    二叉排序树(Binary Sort Tree),又称二叉查找树(Binary Search Tree),也称二叉搜索树. #include <stdio.h> #include <s ...

  7. jquery做个折叠面板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 在Spring中读取properties文件

    1.配置文件(*.properties)往往通过以下方式注册在Spring IOC中. <!-- JDBC配置 --> <context:property-placeholder l ...

  9. mysql 导入导出表结构和表数据

    mysqldump -u用户名 -p密码 -d 数据库名 表名 > 脚本名; 导出整个数据库结构和数据mysqldump -h localhost -uroot -p123456 databas ...

  10. OpenWrt笔记

    ## 1. OpenWrt目录结构说明 作者:辛勤的摆渡人 来源:CSDN 原文:https://blog.csdn.net/hunter168_wang/article/details/507805 ...