<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #myCanvas{ border-top : 1px solid black; border-bottom : 1px solid red; border-left : 1px solid green; border-right : 1px solid yellow; } </style> <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var x = canvas.width/2; console.log(canvas) console.log(canvas.id) console.log(x) var y =5; console.log(y) var dx = 2; var dy = -2; draw(); function draw(){ //Refresh the canvas ctx.clearRect(0,0,canvas.width, canvas.height); ctx.beginPath(); //Here we create our green circle using the arc ctx.arc(x,y,10,0,Math.PI*2); ctx.fillStyle = "tomato"; ctx.fill(); //fill it // console.log(canvas.style.x) ctx.closePath(); //Here is the wall colliding conditions //Here if the value is greater than 800 that is the length of the canvas-reverse the ball if(x+dx>800){ dx = -dx; } if(x+dx<0){ dx = -dx } if(y+dy>600){ dy = -dy } if(y+dy<0){ dy = -dy } //To update the value x += dx; y += dy } setInterval(draw,10); } </script> <body bgcolor="lightblue"> <canvas id="myCanvas" width="800" height="600"> </canvas> <button type="button" class="clicks" value = "start" onclick="clickMe()"> Click Me </button> </body> </html>*Cree un rectángulo de ancho: 800 px y alto 600 px y un borde rojo sólido de 1 px. Dibuja un cuadrado verde que tenga un lado de 60 px dentro del rectángulo. Haga que el rectángulo pequeño se mueva desde el centro de un lado al otro dentro del rectángulo exterior en sentido contrario a las agujas del reloj con solo hacer clic en un botón. Vea la imagen de abajo como referencia. (Use javascript) * Esta bola debe moverse de centro a centro al lado del rectángulo
