使用HTML5的canvas标签 绘制一个跟随鼠标旋转的箭头

从厦门回老家过年了~ 果然还是家里睡觉比较踏实啊。 再加上收到了公司HR的offer。心情不错的说~
今日阳光这么明媚(其实没有),于是继续我的html5学习之路啊。正好friendsofe的新书也出来了 《Fountation HTML5 with JavaScript》。

在HTML5中,进行箭头旋转其实挺容易的,跟AS差不多的样子,嘛~毕竟AS的祖宗可是JS嘛,有很多相同的特性。
话不多说,直接试着把HTML5代码写出来,不知道wordpress 会不会直接显示的说。

[使用你的鼠标在下面的箭头周围移动,箭头将总是指向你鼠标的位置]

-。- 看来不能直接把代码放进wordpress文章页,否则会造成wordpress自身的样式出错啊,只能丢进iframe了。
下面是源码

主文件
test.htm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html>
 <head>
  <mata charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <canvas id="canvas" width="400" height="400">
    <p> :(  抱歉~  <br> 您的浏览器貌似不支持HTML5的标签"canvas"的说,试试更换成
Chrome,FireFox,IE9...</p>
  </canvas>
  <script src="arrow.js"></script>
  <script src="utils.js"></script>
  <script>
  window.onload=function(){
    var canvas=document.getElementById("canvas"),
    context=canvas.getContext('2d'),
    mouse=utils.captureMouse(canvas),
    arrow=new Arrow();

    arrow.x=canvas.width/2;
    arrow.y=canvas.height/2;

    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
                                      window.mozRequestAnimationFrame ||
                                      window.oRequestAnimationFrame ||
                                      window.msRequestAnimationFrame ||
                                      function (callback) {
                                        return window.setTimeout(callback, 1000/60);
                                      });
    }
    (function drawFrame(){
    window.requestAnimationFrame(drawFrame,canvas);
    context.clearRect(0,0,canvas.width,canvas.height);

    var dx=mouse.x-arrow.x;
    var dy=mouse.y-arrow.y;

    arrow.rotation=Math.atan2(dy,dx);
    arrow.draw(context);
    }());

  };
  </script>
 </body>
</html>

var canvas=document.getElementById(“canvas”)
//即将变量 canvas 作为对 html5 canvas标签id为’canvas’ 的引用

context=canvas.getContext(‘2d’)
//获取canvas该对象后,可在其上进行图形绘制

window.requestAnimationFrame
为了便于JavaScript进行图形的重绘,各大浏览器厂商都提供了各自的API给开发者进行调用,由于各大厂商的对HTML5的支持不同,所以API没有统一,但使用厂商各自的API则在该API在对应浏览器上为最有效率的方式运行。代码中对
用户浏览器做判断,实例化能被成功引用的API接口。如果用户的浏览器没有提供该API,则使用JS的setTimeout。其特性类似于AS的 ENTER_FRAME 事件。

需要用到的2个JS文件
utils.js 可根据传入的对象判断,鼠标所在对象的相对于左上角的坐标值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function utils(){};
utils.captureMouse=function(element){
  var mouse={x:0,y:0};
 
  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;
    }
    x -= element.offsetLeft;
    y -= element.offsetTop;
   
    mouse.x=x;
    mouse.y=y;
  },false);
 
  return mouse;
};

计算mouse相对于容器的x,y坐标偏移,本质是判断鼠标在浏览器中的鼠标偏移,之后对浏览器中容器宽度和高度进行再次偏移。

arrow.js
绘制一个箭头的js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function Arrow(){
  this.x=0;
  this.y=0;
  this.color="#ffff00";
  this.rotation=0;
}

Arrow.prototype.draw=function(context){
  context.save();
  context.translate(this.x,this.y);
  context.rotate(this.rotation);
  context.lineWidth=2;
  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.lineTo(-50,-25);
  context.closePath();
  context.stroke();
  context.restore();
 };

熟悉AS的Graphics 的coder一定很快能熟悉使用JS的绘图API

style.css
用到的样式表

1
2
3
4
5
6
7
body{
 background-color:#bbb;
}

#canvas{
 background-color:#fff;
}

区分canvas 内外的颜色。

btw:突然发现升级wordpress后 cc标签不见了(不过还可以用的样子)…试试怎么修复…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.