<!DOCTYPE html>
<html>
<body onload="setInterval('myfunc1()', 10)">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
</canvas>
<br>
<canvas id="canvas2" width="300" height="500"></canvas>
<script>
let xObj = 0;
let yObj = 0;
let speedX = 1;
let speedY = 1;
let state = 0;
function findspeed()
{
let myselect = Math.floor(Math.random() * 2);
if (myselect == 0){
speedX = speedX + 1;
}
if (myselect == 1){
speedY = speedY + 1;
}
if (speedX > 10) speedX = 1;
if (speedY > 10) speedY = 1;
}
function myfunc1(){
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
if (state == 0){
ctx.fillRect(xObj, yObj, 10, 10);
ctx.fillRect(yObj, xObj, 10, 10);
}
xObj+=speedX;
yObj+=speedY;
findspeed();
if (yObj > 300) {
state = 1;
var ctx3 = document.getElementById("canvas2").getContext("2d");
ctx3.save();
ctx3.translate(50,0);
ctx3.rotate(45 * Math.PI / 180);
ctx3.drawImage(canvas, 0,0);
ctx3.restore();
}
}
</script>
</body>
</html>
| 