How to implement graph / image binding event monitoring on canvas

Time:2020-9-23

HTML can only bind listening function for element / tag;

There is only one element in canvas drawing – canvas, and each graph / image is not an element, so event binding cannot be carried out directly.

Solution: “event delegation” — let canvas listen to all events and calculate whether the coordinate point of the event is in the range of a certain graph / image.

Standard graphics can be bound to geometric events;

Event binding for nonstandard geometry is very troublesome.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    < title > canvas drawing music player
    <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 / cherish_ Sun Lu. 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 "; // drawing background // must be assigned before img1 and img2, otherwise it will be covered
    img1.src="img/loop.jpg";
    img2.src="img/play1.png";
    Var progress = 0; // set the weight to judge whether all images are loaded
    img.onload=function () {// background image loading is completed. Judge whether all the images are loaded, and start drawing
        progress+=20;
        (progress==60)&&star();
    }
    Img1. Onload = function() {// background image loading is completed. Judge whether all images are loaded, and start drawing
                progress+=20;
        (progress==60)&&star();
    }
    Img2. Onload = function() {// background image loading is completed. Judge whether all images are loaded, and start drawing
                progress+=20;
        (progress==60)&&star();
    }
    //Start drawing
    function star(){
        Ctx1. DrawImage (IMG, 0,0300500); // draw background image
        Loop(); // draw the loop diagram img1
        Ctx1. DrawImage (img2100350100100); // drawing 2
    }

    //Loop event, click the global variable of the event
    var i=0;
    var time=null;
    var ispause=true;
    //Cyclic function
    function loop(){
        Ctx1. Save(); // save the current state of the brush
        Ctx1. Translate (150165); // translate
        ctx1.rotate(i* Math.PI/180 ); // rotate
        Ctx1. DrawImage (img1, - 65, - 65); // drawing
        Ctx1. Restore(); // reset the state before the brush
        //Draw two circles
        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);
    }
    //Click event
    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 (I am a circle);
            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";
            }
        }

        //Timer to monitor whether the music is played or not, mainly to stop the music playing
        setInterval(function(){
            if(audio.paused){
                ispause=true;
                clearInterval(time);
                img2.src="img/play1.png";
            }
        },5);
    }

    //Progress bar change event -- progress
    Range1. Onchange = function() {// current progress = total music duration * range current value / range maximum value
        audio.currentTime=parseFloat(range1.value*audio.duration/range1.max);
    }
    //Monitor the current playing progress of music. If the time is low, the event of changing the progress bar is invalid (too late to change)
    setInterval("range1.value=parseFloat(range1.max*audio.currentTime/audio.duration);",400);
    //Progress bar change event volume
    audio.volume=0.3;
    range2.onchange=function(){
        audio.volume=range2.value/10;
    }
</script>
</html>

This article on how to implement the graph / image binding event monitoring on canvas will be introduced here. For more information about canvas image binding event monitoring, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!

Recommended Today

Chapter 6: linear equations and the greatest common factor (2)

Now, we know the equation ax+by=gcd(a,b) There is always an integer solutionxAndyHow many solutions are there and how to express them?We are mutually exclusiveaAndbLet gogcd(a,b)=1, assuming(x_1,y_1)It’s an equationax+by=1A solution of. adoptx_1subtractbSum of multiples ofy_1addaOther solutions can be obtained. In other words, for any integerkWe get a new solution(x_1+kb,y_1-ka)By calculating a(x_1+kb)+b(y_1-ka)=ax_1+akb+by_1-bka=ax_1+by_1=1 Still observinggcd(a,b)=1It can be proved […]