html5＜canvas操作图像实例之弹性照片墙＞

Myth丶恋晨 2022-06-15 07:26 216阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
        html,body\{  
            padding: 0;  
            margin: 0;  
            background:\#330;  
            height: 100%;  
            width: 100%;  
            overflow: hidden;  
        \}  
        </style>  
        <script>  
            window.onload = function()\{  
                var canvas = document.getElementById('canvas');  
                canvas.width = document.documentElement.clientWidth;  
                canvas.height = document.documentElement.clientHeight;  
                canvas.style.background = '\#900';  
                var cobj = canvas.getContext('2d');//获取绘图环境  
                var imgs = document.getElementsByTagName('img');  
                var video = document.getElementById('video');  
                var spring = 0.6;  
                var friction= 0.8;  
                var t;  
                cobj.beginPath();  
                cobj.fillStyle ='teal';  
                cobj.rect(0,0, 100, 40);  
                cobj.fill();  
                canvas.onclick = function(e)\{  
                    var mx = e.layerX;  
                    var my = e.layerY;  
                    video.play();  
                    if(cobj.isPointInPath(mx, my))\{  
                        clearInterval(t);  
                        cobj.clearRect(0,0, canvas.width, canvas.height);  
                        var arr = create();  
                        t = setInterval(function()\{  
                            cobj.clearRect(0,0, canvas.width, canvas.height);  
                            for(var i=0;i<arr.length;i++)\{  
                                moves(arr\[i\]);  
                            \}  
                            cobj.beginPath();//重新创建新按钮  
                            cobj.fillStyle ='teal';  
                            cobj.rect(0,0,100,40);  
                            cobj.fill();  
                        \}, 60);  
                    \}  
                \}  
                function moves(obj)\{  
                    obj.vx += (obj.targetx-obj.changex) \* spring;//spring为弹性系数  
                    obj.vy += (obj.targety-obj.changey) \* spring;  
                    obj.changex += (obj.vx \*= friction);//friction为摩擦力  
                    obj.changey += (obj.vy \*= friction);  
                    cobj.beginPath();  
                    cobj.strokeStyle = '\#fff';  
                    cobj.lineWidth = 5;  
                    cobj.moveTo(obj.startx, obj.starty);  
                    cobj.lineTo(obj.changex,obj.changey);  
                    cobj.stroke();  
                    cobj.drawImage(obj.src, obj.changex-obj.width/2, obj.changey-obj.height/2, obj.width, obj.height);   
                \}  
  
                function create()\{  
                    var imgArr = \[\];  
                    for(var i=0;i<5;i++)\{  
                        var imgObj = \{\};  
                        if(i<4)\{  
                            src = imgs\[i\];  
                        \}else\{  
                            src = video;  
                        \}  
                        imgObj = \{src:src,vx:0,vy:0,width:220,height:220,startx:220\*(i+1)+100,starty:-100,targetx:220\*(i+1)+100,targety:300+100\*Math.random(),changex:220\*(i+1)+100,changey:-100\};  
                        imgArr.push(imgObj);  
                    \}  
                    return imgArr;  
                \}  
            \}  
        </script>  
    </head>  
    <body>  
    <canvas id="canvas" width=600 height=600>  
    </canvas>  
    <img src="./images/01.jpg" hidden/>  
    <img src="./images/02.jpg" hidden/>  
    <img src="./images/03.jpg" hidden/>  
    <img src="./images/1.jpg" hidden/>  
    <video src="./images/iceage4.mp4" id="video" hidden></video>  
    </body>

</html>

![Center][]

![Image 1][]

[Center]: /images/20220615/05340fc4c1874aa3a86157dcea6dd5f2.png
[Image 1]: