當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

如何在Canvas上的圖形/圖像綁定事件監(jiān)聽的實(shí)現(xiàn)

 2020-10-27 13:19  來(lái)源: 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

這篇文章主要介紹了如何在Canvas上的圖形/圖像綁定事件監(jiān)聽的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

HTML中只能為元素/標(biāo)簽綁定監(jiān)聽函數(shù);

Canvas繪圖中只有一個(gè)元素-canvas,每一個(gè)圖形/圖像都不是元素,不能直接進(jìn)行事件綁定。

解決辦法:“事件委托”——讓canvas監(jiān)聽所有的事件,計(jì)算事件發(fā)生坐標(biāo)點(diǎn),是否處于某個(gè)圖形/圖像的范圍內(nèi)。

對(duì)于標(biāo)準(zhǔn)幾何圖形可以進(jìn)行事件綁定;

對(duì)于不標(biāo)準(zhǔn)幾何圖形進(jìn)行事件綁定非常麻煩。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas繪制音樂播放器</title>
    <style>
        #range1,#range2{
            height:3px;
            position: relative;
            border: 0;
            outline: 0;
            box-shadow: 0 3px #300 inset;
        }
        #range1{
            width:250px;
            left:-275px;
            top:-10px;
        }
        #range2{
            transform:rotate(-90deg);
            width:50px;
            left:-320px;
            top:-50px;
        }
    </style>
</head>
<body>
    <canvas id="can1" width="300px" height="500px"></canvas>
    <audio src="voice/珍惜_孫露.mp3" id="audio"></audio>
    <input type="range" min="0" max="1000" value="0" id="range1"/>
    <input type="range" min="0" max="10" step="1" value="3" id="range2"/>
</body>

<script>
    var ctx1=can1.getContext('2d');
    var img=new Image();
    var img1=new Image();
    var img2=new Image();
    img.src="img/bg.jpg";//繪圖背景//必須放在img1,img2前賦值,否則會(huì)蓋住
    img1.src="img/loop.jpg";
    img2.src="img/play1.png";
    var progress=0;//設(shè)置權(quán)重,判斷所有圖片是否加載完成
    img.onload=function(){//背景圖片加載完成,判斷是否所有圖片加載完成,是-->開始畫圖
        progress+=20;
        (progress==60)&&star();
    }
    img1.onload=function(){//背景圖片加載完成,判斷是否所有圖片加載完成,是-->開始畫圖
                progress+=20;
        (progress==60)&&star();
    }
    img2.onload=function(){//背景圖片加載完成,判斷是否所有圖片加載完成,是-->開始畫圖
                progress+=20;
        (progress==60)&&star();
    }
    //開始畫圖
    function star(){
        ctx1.drawImage(img,0,0,300,500);//繪背景圖
        loop();//繪制循環(huán)圖 img1
        ctx1.drawImage(img2,100,350,100,100);//繪圖2
    }

    //循環(huán)事件,點(diǎn)擊事件的全局變量
    var i=0;
    var time=null;
    var ispause=true;
    //循環(huán)函數(shù)
    function loop(){
        ctx1.save();//保存畫筆當(dāng)前狀態(tài)
        ctx1.translate(150,165);//平移
        ctx1.rotate(i*Math.PI/180);//旋轉(zhuǎn)
        ctx1.drawImage(img1,-65,-65);//繪圖
        ctx1.restore();//復(fù)位畫筆之前的狀態(tài)
        //繪畫兩個(gè)圓
        ctx1.strokeStyle="#000";
        ctx1.lineWidth=20;
        ctx1.arc(150,165,85,0,2*Math.PI);
        ctx1.stroke();
        ctx1.beginPath();
        ctx1.strokeStyle="#303";
        ctx1.lineWidth=10;
        ctx1.arc(150,165,75,0,2*Math.PI);
        ctx1.stroke();

        i+=10;
        (i>=360)&&(i=0);
    }
    //點(diǎn)擊事件
    can1.onclick=function(e){
        var x= e.offsetX;
        var y= e.offsetY;
        //console.log(x,y);
        if((x-150)*(x-150)+(y-400)*(y-400)<=50*50*Math.PI){
            //console.log("我是圓");
            if(ispause){
                audio.play();
                ispause=false;
                img2.src="img/pause1.png";
                time=setInterval(loop,100);
            }else{
                audio.pause();
                //clearInterval(time);
                //ispause=true;
                //img2.src="img/play.png";
            }
        }

        //定時(shí)器,監(jiān)聽音樂是否播放完成,主要為了音樂播放完成停止
        setInterval(function(){
            if(audio.paused){
                ispause=true;
                clearInterval(time);
                img2.src="img/play1.png";
            }
        },5);
    }

    //進(jìn)度條改變事件--進(jìn)度
    range1.onchange=function(){//當(dāng)前進(jìn)度=音樂總時(shí)長(zhǎng)*range當(dāng)前值/range最大value值
        audio.currentTime=parseFloat(range1.value*audio.duration/range1.max);
    }
    //監(jiān)聽音樂當(dāng)前播放進(jìn)度,時(shí)間低進(jìn)度條改變事件失效(來(lái)不及改變)
    setInterval("range1.value=parseFloat(range1.max*audio.currentTime/audio.duration);",400);
    //進(jìn)度條改變事件--音量
    audio.volume=0.3;
    range2.onchange=function(){
        audio.volume=range2.value/10;
    }
</script>
</html>

到此這篇關(guān)于如何在Canvas上的圖形/圖像綁定事件監(jiān)聽的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Canvas圖像綁定事件監(jiān)聽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

來(lái)源:腳本之家

鏈接:https://www.jb51.net/html5/745327.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
html5canvas

相關(guān)文章

  • canvas實(shí)現(xiàn)圖片鏡像翻轉(zhuǎn)的2種方式

    這篇文章主要介紹了canvas實(shí)現(xiàn)圖片鏡像翻轉(zhuǎn)的2種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

    標(biāo)簽:
    html5canvas
  • Canvas 幀動(dòng)畫吃蘋果小游戲

    這篇文章主要介紹了Html5餅圖繪制實(shí)現(xiàn)統(tǒng)計(jì)圖的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

    標(biāo)簽:
    html5canvas
  • canvas實(shí)現(xiàn)滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例

    這篇文章主要介紹了canvas實(shí)現(xiàn)滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

    標(biāo)簽:
    html5canvas
  • 關(guān)于canvas.toDataURL 在iOS運(yùn)行失敗的問題解決

    這篇文章主要介紹了關(guān)于canvas.toDataURL在iOS運(yùn)行失敗的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

  • 為Canvas而生:開源2D HTML5渲染引擎CutJS

    摘要:CutJS是一款專門用于跨平臺(tái)游戲開發(fā)的開源2DHTML5渲染引擎,輕量級(jí)、快速、可交互,能夠非常良好地解決Canvas所存在的一些缺陷問題,提供類似于DOM樹的數(shù)據(jù)模型,并在內(nèi)部管理渲染周期和應(yīng)用繪制。CutJS是一款專門用于跨平臺(tái)游戲開發(fā)的開源2DHTML5渲染引擎,輕量級(jí)、快速、可交互,

    標(biāo)簽:
    html5canvas

熱門排行

信息推薦