当前位置：53kr资源分享 > 最新资讯 > 行业资讯 > 如何在Canvas上的图形/图像绑定事件监听的实现
eSgpClHPtkuodceSgpClHPtkuodc 行业资讯

如何在Canvas上的图形/图像绑定事件监听的实现

　

这篇文章主要介绍了如何在Canvas上的图形/图像绑定事件监听的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

HTML中只能为元素/标签绑定监听函数；

Canvas绘图中只有一个元素-canvas，每一个图形/图像都不是元素，不能直接进行事件绑定。

解决办法：“事件委托”——让canvas监听所有的事件，计算事件发生坐标点，是否处于某个图形/图像的范围内。

对于标准几何图形可以进行事件绑定；

对于不标准几何图形进行事件绑定非常麻烦。

<!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前赋值,否则会盖住
    img1.src="img/loop.jpg";
    img2.src="img/play1.png";
    var progress=0;//设置权重，判断所有图片是否加载完成
    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();//绘制循环图 img1
        ctx1.drawImage(img2,100,350,100,100);//绘图2
    }

    //循环事件,点击事件的全局变量
    var i=0;
    var time=null;
    var ispause=true;
    //循环函数
    function loop(){
        ctx1.save();//保存画笔当前状态
        ctx1.translate(150,165);//平移
        ctx1.rotate(i*Math.PI/180);//旋转
        ctx1.drawImage(img1,-65,-65);//绘图
        ctx1.restore();//复位画笔之前的状态
        //绘画两个圆
        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);
    }
    //点击事件
    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";
            }
        }

        //定时器,监听音乐是否播放完成，主要为了音乐播放完成停止
        setInterval(function(){
            if(audio.paused){
                ispause=true;
                clearInterval(time);
                img2.src="img/play1.png";
            }
        },5);
    }

    //进度条改变事件--进度
    range1.onchange=function(){//当前进度=音乐总时长*range当前值/range最大value值
        audio.currentTime=parseFloat(range1.value*audio.duration/range1.max);
    }
    //监听音乐当前播放进度，时间低进度条改变事件失效(来不及改变)
    setInterval("range1.value=parseFloat(range1.max*audio.currentTime/audio.duration);",400);
    //进度条改变事件--音量
    audio.volume=0.3;
    range2.onchange=function(){
        audio.volume=range2.value/10;
    }
</script>
</html>

到此这篇关于如何在Canvas上的图形/图像绑定事件监听的实现的文章就介绍到这了,更多相关Canvas图像绑定事件监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：脚本之家

链接：https://www.jb51.net/html5/745327.html

免责申明：
1. 本站所有下载资源均不包含技术支持和安装服务！需要讨论请进群！
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好源码或者教程，可以到审核区发布，分享有KR奖励和额外收入!
4. 如有链接无法下载、失效或广告，请联系管理员处理！
5. 本站无法保证资源或破解时效性，如某些授权码过期等问题，恕不在修复范围内。
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！故不接受任何形式的退款，如确认资源确有问题的，会补给相应KR以供再次购买。
7. 53Kr源码暂未发现后门代码，但无法保证100%安全，推荐检测方法：上传到 https://www.virustotal.com/在线查看是否有恶意代码以及其他有后门嫌疑的代码。
8. 在本站下载的源码我还是不建议正式使用，有特别喜欢的可以去程序官方购买。
53kr资源站仅提供学习的平台，所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
53kr资源分享 » 如何在Canvas上的图形/图像绑定事件监听的实现
分享到：

发表回复