<!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 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>