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


Posted in HTML / CSS onSeptember 16, 2020

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图像绑定事件监听内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 #HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 #HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 #HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 #HTML / CSS
浅析HTML5 Landmark
Sep 11 #HTML / CSS
详解HTML5中CSS外观属性
Sep 10 #HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 #HTML / CSS
You might like
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python将list转为matrix的方法
2018/12/12 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
市优秀教师事迹材料
2014/02/05 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
青春雷锋观后感
2015/06/10 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis