怎样在◎Canvas上的图型/图象关联恶性事件监视的

日期:2021-03-23 类型:科技新闻 

关键词:图片模板,淘宝作图用什么软件好,在线制作白底图,设计图制作软件,抠图软件

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();//复位画笔以前的情况
        //美术绘画2个圆
        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图象关联恶性事件监视內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:丰昌环保节能企业网站建设 返回下一篇:没有了