Эй, у меня есть два круглых изображения на холсте, как показано ниже:
Я хотел эти две вещи:
- , когда мы нажимаем кнопку wheel1, затем я хотел повернуть левое колесо по часовой стрелке до 45 градусов и остановиться.
- когда мы нажмем кнопку wheel2, я хотел повернуть правое колесо против часовой стрелки до 45 градусов и остановиться.
I смогли достичь первого. Но я пробовал весь день сегодня, и я не могу понять, как я могу достичь второго пункта. Когда я нажимаю вторую кнопку, левое колесо перестает вращаться, а правое колесо вращается по всему холсту.
Как я могу повернуть правое колесо против часовой стрелки до 45 градусов? Также есть ли другой эффективный способ достичь той части вопроса, которую я уже достиг?
Я использую это изображение как w.png .
Вот мой код:
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 = "https://www.freeiconspng.com/uploads/car-wheel-png-image-free-download--car-wheel-png-image-free--11.png";
im = image;
im.onload = function() {
ctx.drawImage(im, 0, 20, 200, 200);
}
},
draww2: function() {
var image = new Image();
image.src = "https://www.freeiconspng.com/uploads/car-wheel-png-image-free-download--car-wheel-png-image-free--11.png";
im2 = image;
im2.onload = function() {
ctx.drawImage(im2, cvs.width / 2, 20, 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();
}
<!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>
</body>
</html>