展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</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);
}());
};
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;
};
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();
};
</script>
</body>
</html>
你试试看，满意请采纳回答
追问
能加你Q吗？我有几个小问题想请教你，谢谢哈
追答
回答请采纳了。多谢。。2569120629
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
