canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
类别:Web前端 浏览量:1076
时间:2021-10-22 07:59:42 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图像绑定事件监听内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- docker容器设置端口(Docker 实现容器端口绑定本地端口)
- 宝塔面板解除域名绑定代码(宝塔面板网站防跨站攻击open_basedir无法关闭解决办法)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- docker 容器怎么访问宿主机网络(Docker绑定固定IP/跨主机容器互访操作)
- apache域名绑定(Apache配置独立域名的方法)
- treeview绑定xml
- jquery on绑定多个事件
- dedecms手机页面怎么固定(织梦dedecms配置手机wap站点并绑定二级域名)
- react事件绑定的方式和区别(react合成事件与原生事件的相关理解)
- 微信公众号用户怎么增加(微信公众号用户与网站用户的绑定解决方案分析)
- Asp.net Mvc模型绑定
- WCF NetTcpBinding 绑定
- python中tkinter模块窗口操作(详解python tkinter教程-事件绑定)
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- docker-compose绑定端口失效(docker-compose创建网桥,添加子网,删除网卡的实现)
- dropdownlist绑定枚举值
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
- 熊猫中国国宝(熊猫国宝酒53酱香)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
热门推荐
- phpstudy中apache到期如何修改(phpStudy找不到Apache“服务名” 解决方法)
- 如何获取gridview隐藏列的值
- 如何筛选求职招聘广告
- css中ul li的用法
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- python写的工具(python调用虹软2.0第三版的具体使用)
- nodejs请求页面(node.js+postman实现模拟HTTP服务器与客户端交互)
- 小程序ui图与移动ui(AmazeUI 缩略图的实现示例)
- css选择器常用的用法和说明(针对IE6的一些CSS Hack编写时的注意点小结)
- nginx和lua哪个好(nginx+lua单机上万并发的实现)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9