html5中canvas如何實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭

這篇文章給大家分享的是有關(guān)html5中canvas如何實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

目前成都創(chuàng)新互聯(lián)公司已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、岱岳網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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)起來(lái)并不復(fù)雜，但是麻雀隨小，五臟俱全，主要涉及到的知識(shí)點(diǎn)有：

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

感謝各位的閱讀！關(guān)于“html5中canvas如何實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：html5中canvas如何實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭
標(biāo)題URL：http://www.rwnh.cn/article48/ghcehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、云服務(wù)器、外貿(mào)建站、網(wǎng)站收錄、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

html5中canvas如何實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭