Hey I have two circular images in a canvas as below:
I wanted these two things:
1) when we click the button wheel1 then I wanted rotate left wheel clockwise to 45 degrees and stop.
2) when we click the button wheel2 then I wanted rotate right wheel anti-clockwise to 45degrees and stop.
I have been able to achieve the first one. But I have tried the whole day today and I am not able to figure out that how can I achieve the second point. When I click on the second button the left wheel stops rotating and the right wheel is rotating in the whole canvas.
Here is my code: HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<canvas id="cnv" style="border:solid 1px black;position:absolute;left:0;right:0;margin:auto;"></canvas>
<button id='clockwise'>Wheel1</button>
<button id='antiClockwise'>Wheel2</button>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
JS
var cvs,ctx,img,img2,img3,im,im2,x,y,gblTask,gblTask2,gblTask3,gblTask4,r1=0,r2=0;
$(document).ready(function(){
// $("p").click(function(){
// $(this).hide();
// });
loop();
});
let circle ={
degrees:0,
draww:function(){
var image = new Image();
image.src= "w.png";
im = image;
im.onload = function(){
ctx.drawImage(im,0,0,200,200);
}
},
draww2:function(){
var image = new Image();
image.src= "w.png";
im2 = image;
im2.onload = function(){
ctx.drawImage(im2,cvs.width/2,0,200,200);
}
},
drawRotatedd2:function(){
ctx.clearRect(cvs.width/2,0,cvs.width,cvs.height);
ctx.save();
ctx.translate(cvs.width/2,cvs.height/2);
ctx.rotate((this.degrees-=1)*Math.PI/180);
ctx.drawImage(im2,-cvs.width/2+400,-cvs.height/2+200,200,200);
ctx.restore();
if(this.degrees % 45 == 0){
r2 = 0;
clearInterval(gblTask3);
clearInterval(gblTask4);
}
},
drawRotatedd:function(){
ctx.clearRect(0,0,cvs.width/2,cvs.height);
ctx.save();
ctx.translate(im.width/2,im.height/2);
ctx.rotate((this.degrees+=1)*Math.PI/180);
ctx.drawImage(im,-im.width/2,-im.height/2,200,200);
ctx.restore();
if(this.degrees % 45 == 0){
r1 = 0;
clearInterval(gblTask);
clearInterval(gblTask2);
}
}
}
// document.getElementById('cnv').addEventListener('click',function(event){
// // circle.drawRotated();
// gblTask = setInterval(gblTask2=setInterval(function(){circle.drawRotatedd()},10),100);
// });
document.getElementById('clockwise').addEventListener('click',function(){
if(r1== 0){
r1 = 1;
gblTask = setInterval(gblTask2=setInterval(function(){circle.drawRotatedd()},10),100);
}else{
console.log('1');
}
});
document.getElementById('antiClockwise').addEventListener('click',function(){
if(r2== 0){
r2 = 1;
gblTask3 = setInterval(gblTask4=setInterval(function(){circle.drawRotatedd2()},10),100);
}else{
console.log('1');
}
});
function loop(){
var canvas = document.getElementById('cnv');
var context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 450;
ctx = context;
cvs = canvas;
// circle.draw();
circle.draww();
circle.draww2();
}
I am using this image as w.png.
How can I rotate the right wheel anti clockwise to 45 degrees?Also is there any other efficient way to achieve the part in the question I have already achieved?