欧美精品麻豆,欧美办公室脚交xxxx,日韩理论片久久

本文實(shí)例為大家分享了

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>canvas實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭</title>
<style>
*{padding: 0;margin: 0}
</style>
</head>
<body>
<canvas width="500" height="500" style="border: 1px solid #555; display: block;margin: 0 auto;"></canvas>
<script>
var arrow=function () {
this.x=0;
this.y=0;
this.color="#f90"
this.rolation=0;
}
var canvas=document.querySelector('canvas')
var ctx=canvas.getContext('2d');
arrow.prototype.draw=function (ctx) {
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.rolation)
ctx.fillStyle=this.color;
ctx.beginPath();
ctx.moveTo(0, 15);
ctx.lineTo(-50, 15);
ctx.lineTo(-50, -15);
ctx.lineTo(0,-15);
ctx.lineTo(0,-35);
ctx.lineTo(50,0);
ctx.lineTo(0,35);
ctx.closePath()
ctx.fill();
ctx.restore();
}
var Arrow=new arrow();
Arrow.x=canvas.width/2;
Arrow.y=canvas.height/2;
var c_x,c_y; //相對(duì)于canvas坐標(biāo)的位置；
var isMouseDown=false;
Arrow.draw(ctx)
canvas.addEventListener('mousedown',function(e) {
isMouseDown=true;
},false)
canvas.addEventListener('mousemove',function(e) {
if(isMouseDown==true){
c_x=getPos(e).x-canvas.offsetLeft;
c_y=getPos(e).y-canvas.offsetTop;
//setInterval(drawFram,1000/60)
requestAnimationFrame(drawFram)
}
},false)
canvas.addEventListener('mouseup',function(e) {
isMouseDown=false;
},false)
function drawFram(){
var dx=c_x-Arrow.x;
var dy=c_y-Arrow.y;
Arrow.rolation=Math.atan2(dy,dx);
ctx.clearRect(0,0,canvas.width,canvas.height);
Arrow.draw(ctx)
}
function getPos(e) {
var mouse={x:0,y:0}
var ee=e||event;
if(e.pageX||e.pageY){
mouse.x=e.pageX;
mouse.y=e.pageY;
}else{
mouse.x=e.pageX+document.body.scrollLeft+document.document.documentElement.scrollLeft;
mouse.y=e.pageY+document.body.scrollTop+document.document.documentElement.scrollTop;
}
return mouse;
}
</script>
</body>
</html>

DEMO地址：http://codepen.io/jonechen/pen/eZpgWd

不廢話，直接上DEMO了，這個(gè)效果實(shí)現(xiàn)起來并不復(fù)雜，但是麻雀隨小，五臟俱全，主要涉及到的知識(shí)點(diǎn)有：

1、canvas的基本繪圖；
2、js各個(gè)事件的監(jiān)聽；
3、js動(dòng)畫；
4、三角函數(shù)結(jié)合js在canvas中的基本應(yīng)用；

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

原文：http://www.cnblogs.com/jone-chen/p/5243439.html

標(biāo)簽：蘇州紅河咸陽萍鄉(xiāng) 惠州營(yíng)口文山甘南

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html5 canvas實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭》，本文關(guān)鍵詞 html5,canvas,實(shí)現(xiàn),跟隨,鼠標(biāo),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。