从厦门回老家过年了~ 果然还是家里睡觉比较踏实啊。 再加上收到了公司HR的offer。心情不错的说~
今日阳光这么明媚（其实没有），于是继续我的html5学习之路啊。正好friendsofe的新书也出来了 《Fountation HTML5 with JavaScript》。
在HTML5中，进行箭头旋转其实挺容易的，跟AS差不多的样子，嘛~毕竟AS的祖宗可是JS嘛，有很多相同的特性。
话不多说，直接试着把HTML5代码写出来，不知道wordpress 会不会直接显示的说。
[使用你的鼠标在下面的箭头周围移动，箭头将总是指向你鼠标的位置]
-。- 看来不能直接把代码放进wordpress文章页，否则会造成wordpress自身的样式出错啊，只能丢进iframe了。
下面是源码
主文件
test.htm
[cc lang=”javascript” nowrap=”false”]
[/cc]
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 可根据传入的对象判断，鼠标所在对象的相对于左上角的坐标值
[cc lang=”javascript” nowrap=”false”]
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;
};
[/cc]
计算mouse相对于容器的x,y坐标偏移，本质是判断鼠标在浏览器中的鼠标偏移，之后对浏览器中容器宽度和高度进行再次偏移。
arrow.js
绘制一个箭头的js
[cc lang=”javascript” nowrap=”false”]
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();
};
[/cc]
熟悉AS的Graphics 的coder一定很快能熟悉使用JS的绘图API
style.css
用到的样式表
[cc lang=”css” nowrap=”false”]
body{
background-color:#bbb;
}
#canvas{
background-color:#fff;
}
[/cc]
区分canvas 内外的颜色。
btw:突然发现升级wordpress后 cc标签不见了（不过还可以用的样子）…试试怎么修复…