首页 > 作文

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

更新时间:2023-04-07 14:57:30 阅读: 评论:0

html中只能为元素/标签绑定监听函数;

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

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

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

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

<!doctype html><html><head lang="en">    <meta chart="utf-8">    <title>canvas绘制音乐播放器</title>    <style>        #range1,#range2{            height:3px;            position: relative;            border: 0;            outline: 0;            box-shadow: 0 3px #300 int;        }        #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 ispau=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.offtx;        var y= e.offty;        //console.log(x,y);        if((x-150)*(x-150)+(y-400)*(y-400)<=50*50*math.pi){            //console.log("我是圆");            if(ispau){                audio.play();                ispau=fal;                img2.src="img/pau1.png";                time=tinterval(loop,100);            }el{                audio.pau();                //clearinterval(time);                //ispau=true;                //img2.src="img/play.png";            }        }        //定时器,监听音乐是否播放完成,主要为了音乐播放完成停止        tinterval(function(){            if(audio.paud){                ispau=true;                clearinterval(time);                img2.src="img/play1.png";            }        },5);    }    //进度条改变事件--进度    range1.onchange=function(){//当前进度=音乐总时长*range当前值/range最大value值        audio.currenttime=parfloat(range1.value*audio.duration/range1.max);    }    //监听音乐当前播放进度,时间低进度条改变事件失效(来不及改变)    tinterval("range1.value=parfloat(range1.max*audio.currenttime/audio.duration);",400);    //进度条改变事件--音量    audio.volume=0.3;    range2.onchange=function(){        audio.volume=range2.value/10;    }</script></html>

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

本文发布于:2023-04-07 14:57:28,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/af108feeec8c14440ea503e7e5a068df.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:如何在Canvas上的图形/图像绑定事件监听的实现.doc

本文 PDF 下载地址:如何在Canvas上的图形/图像绑定事件监听的实现.pdf

标签:事件   绑定   加载   画图
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图