<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#c{
background: #aaaaaa;
position: absolute;
left: 0;
top:0;
z-index: 1;
}
.btn{
position: absolute;
top: 400px;
z-index: 5;
}
.pl{
left: 200px;
}
.pa{
left: 100px;
}
img{
75px;
}
</style>
</head>
<body>
<audio src="img/famm.mp3" id="v"></audio>
<canvas id="c" width="600" height="600"></canvas>
<a href="#" id="play" class="btn pl"><img src="img/play.png" alt=""></a>
<a href="#" id="pause" class="btn pa"><img src="img/pause.png" alt=""></a>
<script>
var c=document.getElementById('c');
var v=document.getElementById('v');
var ctx= c.getContext('2d');
var timer=null;
function p1(){
var p=new Image;
p.src='img/bg.jpg';
p.onload=function(){
ctx.drawImage(p,0,0);
};
}
p1();
function p2(){
var p2=new Image;
p2.src='img/disc.png';
p2.onload=function(){
ctx.drawImage(p2,75,75,250,250)
};
}
p2();
var deg=0;
play.onclick=function(){
v.play();
timer=setInterval(function(){
deg+=5;
ctx.clearRect(0,0,600,600);
var p=new Image;
p.src='img/bg.jpg';
ctx.drawImage(p,0,0);
var p2=new Image;
p2.src='img/disc.png';
ctx.save();
ctx.translate(200,200);
ctx.rotate(deg*Math.PI/180);
ctx.drawImage(p2,-125,-125,250,250);
ctx.restore();
},41)
};
pause.onclick=function(){
v.pause();
clearInterval(timer);
}
</script>
</body>
</html>