<!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. makefile中的target到底代表什么?

    刚开始用make的时候,以为makefile中名字叫做main的target就是make默认执行的target(中文翻译叫做标的(di,四声),下面统一称呼为标的),然后曾经很天真地犯过这样的错误,就 ...

  2. 判断手机,pc方式登录

     <script type="text/javascript">         function browserDetect() {             var  ...

  3. c#获取多个List<class>合并、并将相同条件下的值累计sum

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. tomcat servlet 线程

    在服务器里,有一个servlet,当客户端第一次访问服务器时,tomcat会 帮我们建一个servlet的对象出来,(注意: tomcat里面可能部署了10个Servlet,如果某一个Servlet从 ...

  5. 3种方式实现Java多线程

    java中实现多线程的方法有两种:继承Thread类和实现runnable接口. 1.继承Thread类,重写父类run()方法 public class thread1 extends Thread ...

  6. sprintf函数减少字符串拼接错误

    $return_string=""; foreach($cat_list as $value){ $return_string .= sprintf('<dd>< ...

  7. mysql事件调度器定时删除binlog

    MySQL5.1.6起Mysql增加了事件调度器(Event Scheduler),可以用做定时执行某些特定任务,来取代原先只能由Linux操作系统的计划任务来执行的工作MySQL的事件调度器可以精确 ...

  8. php的register_shutdown_function函数详解

    function shutdown() { $last_error = error_get_last(); if ($last_error) { error_log(print_r($last_err ...

  9. PHP加密解密函数

    <?php/***功能:对字符串进行加密处理*参数一:需要加密的内容*参数二:密钥*/function passport_encrypt($str,$key){ //加密函数 srand((do ...

  10. 《Prism 5.0源码走读》Prism 5.0简介

    Prism是一个开发和设计模块化WPF应用的基础框架,里面包含了MVVM pattern和设计示例.当前最新的版本是Prism 5.0,官方网站:https://compositewpf.codepl ...