效果图：

代码：

<!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. Oracle ORA-00600[2662] 解决

    一.问题描述 1.数据库情况 1)数据库版本:11.2.0.4: 2)未开启归档: 3)没有备份:无RMAN备份.无DUMP备份: 4)数据库redo log 日志组,每组只有一个成员: 2.问题出现 ...

  2. Linux存储在线管理（一）FC磁盘设备管理

    由 Jun_Tan 在 2013-1-28 上午12:08 上创建,最后由 Jun_Tan 在 2013-1-28 上午12:13 上修改 版本 1 Linux存储在线管理(一)FC磁盘设备管理 转载 ...

  3. 洛谷P1016 旅行家的预算 题解

    主要就是注意一下各个变量的类型别弄混了 https://www.luogu.org/problem/P1016 #include<cstdio> using namespace std; ...

  4. MongoDB之安装部署

    一.安装MongoDB 在安装MongoDB之前,应该先把MongoDB官方网站上下载下来,下载的地址如下: https://www.mongodb.com/download-center 下载完毕之 ...

  5. Linux下如何回到根目录

    cd .. , 意思是到上一级目录: cd - ,意思是返回到上次的目录,类似windows返回 : cd /,意思是回到根目录.

  6. 什么是vue的全家桶

    vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成.

  7. 怎么样使用vuex

    https://www.cnblogs.com/songrimin/p/7815850.html

  8. Tcl模块化

    Proc 过程名 参数列表 过程体 示例代码(斐波那契数列): proc fib {num} { if {$num<=2} {return 1} return [expr [fib [expr ...

  9. 走进JavaWeb技术世界9：Java日志系统的诞生与发展

    本文转自[码农翻身] ## 一个著名的日志系统是怎么设计出来的? # 1前言 Java帝国在诞生之初就提供了集合.线程.IO.网络等常用功能,从C和C++领地那里吸引了大量程序员过来加盟,但是却有意无 ...

  10. 米津玄師 - Lemon

    Lemon 词:米津玄師 曲:米津玄師 夢(ゆめ)ならば どれほどよかったでしょう 未(いま)だにあなたのことを夢(ゆめ)にみる 忘(わす)れた物(もの)を 取(と)りに帰(かえ)るように 古(ふる) ...