这个真的可以玩一天

kait1314
kait1314 发布于 2017-03-15 16:28:13 浏览:3055 类型:转载 - 随笔 分类:JavaScript - canvas 二维码: 转载说明
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<canvas id='canvas' width="500" height="500" style="background:#ccc;">
  你的浏览器不行啊~
</canvas>
<!--箭头函数-->
<script>
function Arrow() {
    this.x = 0; //初始位置
    this.y = 0;
    this.rotation = 0; //初始旋转角度
    this.color = '#ffff00';

}
//在原型上定义draw方法
Arrow.prototype.draw = function(context) {
    context.save();
    context.translate(this.x, this.y); //将坐标移到this.x 和 this.y
    context.rotate(this.rotation); //设置旋转角度
    context.lineWidth = 5; //设置线宽
    context.fillStyle = this.color; //设置填充色
    context.beginPath(); //路径开始
    context.moveTo(-50, -25);
    context.lineTo(0, -25);
    context.lineTo(0, -50);
    context.lineTo(50, 0);
    context.lineTo(0, 50);
    context.lineTo(0, 25);
    context.lineTo(-50, 25);
    context.closePath(); //路径闭合
    context.stroke(); //描边
    context.fill(); //填充
    context.restore();
}
</script> 
<!-- 工具函数 -->
<script>
//将utils定义为window对象下的一个属性,属性值为对象
window.utils = {};

//在utils对象上定义捕获坐标的方法
window.utils.captureMouse = function(element) {
    //定义一个名为mouse的对象
    var mouse = {
        x: 0,
        y: 0
    };

    //为元素绑定mousemove事件
    element.addEventListener('mousemove', function(event) {
        var x, y;

        //获取鼠标位于当前屏幕的位置, 并作兼容处理
        if (event.pageX || event.pageY) {
            x = event.pageX;
            y = event.pageY;
        } else {
            x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        //将当前的坐标值减去元素的偏移位置,即为鼠标位于当前canvas的位置
        x -= element.offsetLeft;
        y -= element.offsetTop;

        mouse.x = x;
        mouse.y = y;
    }, false);
    //返回值为mouse对象
    return mouse;
}
</script> 
<script>
  window.onload = function(){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var centerX = canvas.width/2;
    var centerY = canvas.height/2;
    
    //传入canvas,获取鼠标在canvas上移动是的坐标
    var mouse = utils.captureMouse(canvas);
         
    //新建一个arrow对象
    var arrow = new Arrow();
         
    //将arrow的坐标设置为canvas的中心
    arrow.x = centerX;
    arrow.y = centerY;
             
  //动画循环函数
  (function drawFrame(){
      window.requestAnimationFrame(drawFrame,canvas);
      context.clearRect(0, 0, canvas.width, canvas.height);
              
      //获取dy,dx值
      var dx = mouse.x - arrow.x,
      dy = mouse.y - arrow.y;
                  
      //设置旋转角度
      arrow.rotation = Math.atan2(dy, dx);
                
     //调用draw方法画出
      arrow.draw(context);

  })();
}

</script>
</body>
</html>

说实话,只要JS学好,这种东西你们也能做,替作者宣传一波吧~,让大家也学习学习,一起装一起飞!
想仔细了解的请点击https://segmentfault.com/a/1190000004922024
z
给个赞 25 人点赞
收藏 46 人收藏
评论 已有 13 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
13466829845
134668298452017-03-16 15:03:345F
window.onmousemove = function(ev){
                        context.clearRect(0,0,400,400);
                        //alert("x:"+ev.clientX);
                        //alert("y:"+ev.clientY);
                        var mx = ev.clientX;
                        var my = ev.clientY;
                        var dx = mx - arrow.x;
                        var dy = my - arrow.y;
                        arrow.rotation = Math.atan2(dy,dx);
                        arrow.draw(context);
                };
举报 支持 (1) 回复 (0)
最新评论
kait1314
kait13145 天前13F
emoticon //@daijiulong:看你这头像 想揍你。对你没偏见
举报 支持 (0) 回复 (0)
daijiulong
daijiulong5 天前12F
看你这头像 想揍你。对你没偏见
举报 支持 (0) 回复 (1)
951216388
9512163885 天前11F
一个js的动画基础的书籍,书名叫什么不记得了。 //@1325009640:什么书? 有很多例题 实例? //@951216388:这是一本书籍上的代码,我有此书
举报 支持 (0) 回复 (0)
1325009640
13250096406 天前10F
什么书? 有很多例题 实例? //@951216388:这是一本书籍上的代码,我有此书
举报 支持 (0) 回复 (1)
951216388
9512163886 天前9F
这是一本书籍上的代码,我有此书
举报 支持 (0) 回复 (1)
豆角
豆角7 天前8F
老铁啊,  感觉不到啊
举报 支持 (0) 回复 (0)
ablikim915
ablikim9157 天前7F
谁告诉我这个怎么玩?
举报 支持 (0) 回复 (0)
凡林
凡林7 天前6F
扎心了  老铁
举报 支持 (0) 回复 (0)
13466829845
134668298452017-03-16 15:03:345F
window.onmousemove = function(ev){
                        context.clearRect(0,0,400,400);
                        //alert("x:"+ev.clientX);
                        //alert("y:"+ev.clientY);
                        var mx = ev.clientX;
                        var my = ev.clientY;
                        var dx = mx - arrow.x;
                        var dy = my - arrow.y;
                        arrow.rotation = Math.atan2(dy,dx);
                        arrow.draw(context);
                };
举报 支持 (1) 回复 (0)
奋斗的达达
奋斗的达达2017-03-16 13:58:554F
这代码让人看着舒服,就是从window.onload那开始就难受了emoticon
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2017-03-16 10:23:393F
为什么我觉得玩不了
举报 支持 (0) 回复 (0)
Ngt
Ngt2017-03-16 09:37:281F
可以的
举报 支持 (0) 回复 (0)
Ngt
Ngt2017-03-16 09:37:282F
可以的
举报 支持 (0) 回复 (0)
kait1314 kait1314 作者

老铁,扎心不?

作者最新