<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <title>canvas实现跟随鼠标旋转的箭头</title>

  <style>

    *{padding: 0;margin: 0}

    </style>

 </head>

 <body>

  <canvas width="500" height="500" style="border: 1px solid #555; display: block;margin: 0 auto;"></canvas>

  <script>

        var arrow=function () {

            this.x=0;

            this.y=0;

            this.color="#f90"

            this.rolation=0;

        }

        var canvas=document.querySelector('canvas')

        var ctx=canvas.getContext('2d');

        arrow.prototype.draw=function (ctx) {

            ctx.save();

            ctx.translate(this.x,this.y);

            ctx.rotate(this.rolation)

            ctx.fillStyle=this.color;

            ctx.beginPath();

            ctx.moveTo(0, 15);

            ctx.lineTo(-50, 15);

            ctx.lineTo(-50, -15);

            ctx.lineTo(0,-15);

            ctx.lineTo(0,-35);

            ctx.lineTo(50,0);

            ctx.lineTo(0,35);

            ctx.closePath()

            ctx.fill();

            ctx.restore();

        }

        var Arrow=new arrow();

        Arrow.x=canvas.width/2;

        Arrow.y=canvas.height/2;

        var c_x,c_y; //相对于canvas坐标的位置；

        var isMouseDown=false;

        Arrow.draw(ctx)

        canvas.addEventListener('mousedown',function(e) {

            isMouseDown=true;

        },false)

        canvas.addEventListener('mousemove',function(e) {

            if(isMouseDown==true){

                c_x=getPos(e).x-canvas.offsetLeft;

                c_y=getPos(e).y-canvas.offsetTop;

                //setInterval(drawFram,1000/60)

                requestAnimationFrame(drawFram)

            }

        },false)

        canvas.addEventListener('mouseup',function(e) {

            isMouseDown=false;

        },false)

        function drawFram(){

            var dx=c_x-Arrow.x;

            var dy=c_y-Arrow.y;

            Arrow.rolation=Math.atan2(dy,dx);

            ctx.clearRect(0,0,canvas.width,canvas.height);

            Arrow.draw(ctx)

        }

        function getPos(e) {

            var mouse={x:0,y:0}

            var e=e||event;

            if(e.pageX||e.pageY){

                mouse.x=e.pageX;

                mouse.y=e.pageY;

            }else{

                mouse.x=e.pageX+document.body.scrollLeft+document.document.documentElement.scrollLeft;

                mouse.y=e.pageY+document.body.scrollTop+document.document.documentElement.scrollTop;

            }

            return mouse;

        }

    </script>

 </body>

</html>

DEMO地址：http://codepen.io/jonechen/pen/eZpgWd

不废话，直接上DEMO了，这个效果实现起来并不复杂，但是麻雀随小，五脏俱全，主要涉及到的知识点有：

1、canvas的基本绘图；
2、js各个事件的监听；
3、js动画；
4、三角函数结合js在canvas中的基本应用；

canvas实现跟随鼠标旋转的箭头的更多相关文章

  1. 【canvas】跟随鼠标的星空连线

    2019-01-23 19:57:38 挂一个比较简单的一个canvas应用,利用CPU进行粒子实时计算,直接面向过程写的 帧动画:浏览器在下一个动画帧安排一次网页重绘,  requestAnimat ...

  2. Unity3D 物体跟随鼠标旋转

    float speed=1000f; void Update () { if (Input.GetMouseButton (0)) { transform.Rotate (0,-Input.GetAx ...

  3. Unity3D GUI中的图片跟随鼠标旋转脚本

    var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...

  4. Canvas跟随鼠标炫彩小球

    跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...

  5. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  6. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  7. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  8. WPF 跟随鼠标动画 by wgscd

    WPF 跟随鼠标动画 by wgscd <UserControl x:Class="WpfApplication1.Spark" xmlns="http://sch ...

  9. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Android IOS WebRTC 音视频开发总结（五十）-- 技术服务如何定价？

    这篇文章最早是杜老师写的,看完感触很深,加上之前跟咨询公司的朋友也讨论过这方面的问题,所以结合自己的经验,做了些删改(得到了杜老师的授权). 先通过下面几个简单的问题来了解技术服务: 问题1:技术服务 ...

  2. Web.config配置文件

    优点:Web.config配置文件使得ASP.NET应用程序的配置变得灵活高效和容易实现并为ASP.NET应用提供了可扩展的配置,使得应用程序能够自定义配置,同时还包括的优点有:配置设置易读性.更新的 ...

  3. 魔兽塔防游戏android源码

    魔兽塔防是一款经典的游戏,当年在pc机器上玩过魔兽的人应该都玩过类似的游戏,他仿照魔兽,建塔拦截敌人入侵,发挥你的智慧让敌人走最远的路,将他们消灭在路上.... 源码下载:http://code.66 ...

  4. 对于返回void类型的asyc的异步方法，如何修改，能使用await

    下面是使用WebClinet 获取百度首页的html代码,一般的写法如下: private void Button_Click(object sender, RoutedEventArgs e) { ...

  5. InnoDB 存储引擎—索引

    1.引言         InnoDB 存储引擎支持以下几种觉的索引:             1.1    B+ 树索引 (平衡树索引)             1.2    全文索引       ...

  6. sql server2005 实现读写分离

    下面我们重点介绍Sql Server 2005是如何实现负载均衡的. Sql Server 2005的新特性 端到端拓扑的事务性复制 SQL Server 2005对端到端(P2P)拓扑结构上事务性的 ...

  7. linux网络bond技术

    http://blog.chinaunix.net/uid-20799583-id-3117665.html1.创建bond0配置文件vi /etc/sysconfig/network-scripts ...

  8. Hive中的排序语法

    ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似.他会对查询结果做全局排序,这意味着所有的数据会传送到一个Reduce任务上,这样会导致在大数量的情况下,花费大量时间. ...

  9. PHP面向对象之旅：static变量与方法

    static关键字声明一个属性或方法是和类相关的,而不是和类的某个特定的实例相关,因此,这类属性或方法也称为“类属性”或“类方法”. 如果访问控制权限允许,可不必创建该类对象而直接使用类名加两个冒号“ ...

  10. Python核心编程--学习笔记--8--条件与循环

    本章讲述if.while.for以及与他们搭配的else.elif.break.continue.pass等语句. 1 if语句 语法:三部分——关键字if.条件表达式.代码块.(记住冒号) if c ...