下面是源码
主文件
test.htm
<!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 可根据传入的对象判断，鼠标所在对象的相对于左上角的坐标值
unction 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
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
用到的样式表
body{background-color:#bbb
}
#canvas{
background-color:#fff
}
区分canvas 内外的颜色。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0 padding: 0}
div{width: 50px height: 40px background-color: #ccc}
div span{display: inline-block border: 5px solid transparent border-bottom-color: red transform-origin: bottom}
div:hover span{transform: rotate(180deg)}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>
划到上面的时候让里面代表尖头的子元素旋转180度就可以了，用transform：rotate即可
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）