2. 程式人生 > >如何在Canvas上的圖形/影象繫結事件監聽？

如何在Canvas上的圖形/影象繫結事件監聽？

阿新 • • 發佈：2019-01-21
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; }

相關推薦

如何在Canvas上的圖形/影象繫結事件監聽？

var ctx1=can1.getContext('2d'); var img=new Image(); var img1=new Image(); var img2=new Image(); img.src="img/bg.jpg";//繪圖背景//必須放在img1

layui 繫結事件監聽

溫馨小提示：如果是form表單的繫結事件監聽，可參考官網文件：https://www.layui.com/doc/modules/form.html#on 下面是繫結普通事件 ①html頁面給你想要繫結的地方加上id或class屬性，下面我以id舉例 <a cl

JS新增/繫結事件監聽函式並傳引數attachEvent和addEventListener相容個瀏覽器

   var fn =fun;    if(param)     {        fn =function(e)        {          fun.call(this, param);  //繼承監聽函式,並傳入引數以初始化;        }     }    if(obj.attachEven

在微信小程式中如何獲取使用者當前的地理位置以及在頁面上如何給在map元件上的圖示繫結事件

效果圖 元件 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="15" controls="{{controls}}" bindcontroltap="controlta

在input元素上用非繫結的方式監聽回車事件並傳遞引數

場景是動態生成html元素，為生成的input新增事件。 要求有兩點：非繫結的方式並且需要傳遞引數 ；引數為方法名稱，回撥該方法並將input的值作為引數。 參考實現如下： input寫法 tmp.push('<input type="text" id="myInp

JS事件繫結，事件監聽，事件委託

        在JavaScript的學習中，我們經常會遇到JavaScript的事件機制，例如，事件繫結、事件監聽、事件委託（事件代理）等。這些名詞是什麼意思呢，有什麼作用呢？ 事件繫結 要想讓 JavaScript 對使用者的操作

JS事件機制：事件繫結、事件監聽、事件委託(代理)和事件執行順序總結

JS 對於使用者的操作做出響應,就必須對DOM元素繫結事件處理函式 事件繫結 　1、在DMO中直接繫結事件 <input type="button" value="click me"

手機端滑動事件監聽，可繫結多個DIV

自己寫的DEMO僅供學習 <!doctype html> <html> <head> <meta charset="utf-8"> <tit

JavaScript事件的繫結與取消和事件監聽

                很多情況下，比如我們想對一個文字框或者按鈕進行事件繫結的時候，一般直接在他上面寫上什麼onclic

事件處理程式（事件繫結、事件監聽、事件偵聽器）

相應某個事件的函式叫做事件處理程式（或事件偵聽器）。 1、TTML事件處理程式 <script type="text/javascript"> function showMessage() { alert('hello world!')

angular父級元素繫結事件作用在子級元素上解決方法

<a class="left-btn" ng-click='toLeft($event)'>    <i class="left-icon"></i>    <span>北京</span></a>$sco

用jQuery繫結事件到動態建立的元素上

jQuery最常用的一個功能就是對DOM的操作，與之相關的比如對事件的繫結和Ajax動態內容載入。當我們繫結事件到Ajax load回來的內容上或其他動態建立的元素上時會發現事件沒響應，和你預想的結果不同，就像沒這會事兒一樣。這是前端開發 非常蛋疼的問題。jQuery在1.

js事件冒泡、事件繫結、事件監聽、事件委託

點選連結 事件機制 事件繫結 首先要對 DOM 元素繫結事件處理函式。所謂事件處理函式，就是處理使用者操作的函式，不同的操作對應不同的名稱。 事件繫結的辦法： 1.直接在HTML元素繫結，在標籤後加onclick = function(){}等

js事件繫結、事件監聽、事件委託

一、JavaScript事件：事件是文件或瀏覽器中發生的特定互動瞬間！ 事件流： 1、事件冒泡：事件冒泡即事件最開始由最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級向上傳播至最不具體的節點（文件）。 text–>div–&

Netty事件監聽和處理（上）

事件處理 多路復用 linu 自定義事件 性能 cdn 處理請求 fancybox 客戶 陪產假結束了，今天又開始正常上班了，正好趕上米粉節活動，又要忙上一陣了，米粉節活動時間為4.03 - 4.10，有不少優惠，感興趣的可以關註mi.com或小米商城app。 今天

JAVA 圖形開發之計算器設計（事件監聽機制）

oncommand image 事件監聽 str one 創建 dac orm mat /*文章中用到的代碼只是一部分，需要源碼的可通過郵箱聯系我 [email protected]*/ 前段時間剛幫同學用MFC寫了個計算器，現在學到JAVA的圖形開發，就試著水了一個計算器

jQuery中bind（），one（），on（），live（）這幾個繫結事件函式的區別

1、bind（）方法 為每個匹配元素的特定事件繫結事件處理函式。bind（）方法的底層邏輯是on（）方法。 .bind() 方法是用於往文件上附加行為的主要方式。所有JavaScript事件物件，比如focus, mouseover, 和 resize，都是可以作為type引數傳遞進來

jQuery 動態生成on的繫結事件

該段程式碼實現的是穿梭框： // on的繫結事件傳引數 var clickEven = [ {id:"#demo01",class:".class0",list:"#demo02"}, {id:"#demo02",class:".class0",lis

js 回車鍵繫結事件

<label class="col-sm-1 control-label">快速搜尋<span style="color:red;"> </span> </label>

jQuery兩種繫結事件

jQuery兩種繫結事件方式 1.eventName(fn),   js部分事件沒有實現 2.on("eventName",fn)   js所有的事件都實現了 <html> <head> <title></title> <