效果图：

代码：

<!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. PostgreSQL10.5 - 创建索引的思考

    总体感觉整个索引创建的比较慢,PostgreSQL10没有并行创建索引的功能,所以执行过程中,仅用到了服务器的一个核心来执行计算.索引创建是一个高CPU消耗的工作,CPU基本会跑满,会用到backen ...

  2. Oracle语句中IN和=的区别有哪些？

    Oracle语句中IN和=的区别有: 1.首先应用范围不一样:in 可以理解为是范围内的选择:= 只有一个.例如: select sno, sname from t1 where sno in ('s ...

  3. CF798D Mike and distribution 贪心

    我感觉这道题挺神的~ 假设 $a[i]=b[i]$,那么我们可以将 $a$ 降序排序,然后你发现只要你按照 $1,3,5......n$ 这么取一定是合法的. 而我们发现 $2$ 比取 $3$ 优,取 ...

  4. 2019ICPC南京自我反省

    第一场ICPC,跟第一场CCPC一样,可惜真的可惜. 打完比赛就感觉难受,难受不在于又抱了块铜牌,而是那种能出的题没出的可惜感非常浓重. 开场还是可以的,通过一阵讨论,就大胆猜测了A的规律,然后一发过 ...

  5. faebdc的烦恼 莫队

    faebdc的烦恼 莫队 题面 思路 有点难想的莫队. 首先我们肯定要一个cnt[i]记录难度i出现的次数,但是我们发现每次删去一个难度后,如果那个难度的个数恰好是当前最多次数,我们就可能要更新一下答 ...

  6. 使用tmate快速分享你的终端会话

    tmate 的意思是 teammates,它是 tmux 的一个分支,并且使用相同的配置信息(例如快捷键配置,配色方案等).它是一个终端多路复用器,同时具有即时分享终端的能力.它允许在单个屏幕中创建并 ...

  7. JAVA基础知识|synchronized和lock

    一.synchronized 是jvm的一个关键字,使用过程均由jvm控制 有三种使用方式: 修饰实例方法,作用于当前实例加锁,进入同步代码前要获得当前实例的锁 修饰代码块,同方法 修饰静态方法,作用 ...

  8. qt Qt5开发

    本章将介绍使用Qt5开发.我们将告诉你如何安装Qt SDK,如何使用Qt Creator IDE创建以及运行一个简单的Hello World应用程序. 一.安装Qt5 SDK Qt SDK包括构建桌面 ...

  9. leetcode 127. Word Ladder、126. Word Ladder II

    127. Word Ladder 这道题使用bfs来解决,每次将满足要求的变换单词加入队列中. wordSet用来记录当前词典中的单词,做一个单词变换生成一个新单词,都需要判断这个单词是否在词典中,不 ...

  10. 【原创】主机不能访问虚拟机CentOS7中的站点

    主机不能访问虚拟机CentOS7中的站点 ================================ 虚拟机上装好了centos7,并配好了nginx+php+mysql,但是本机就是无法访问. ...