<!doctype html>
<head>
<script>
function iniciar()
{
var elemento = document.getElementById("lienzo");
var lienzo = elemento.getContext("2d");
lienzo.translate(500,500)
var fecha = new Date()
var segundos = fecha.getSeconds()
lienzo.save()
var rad = (segundos*6*Math.PI)/180
lienzo.rotate(rad)
lienzo.fillStyle="#FF0000"
lienzo.fillRect(0,0,100,100)
lienzo.restore()
}
function animacion(){
setInterval(iniciar,1000)
}
</script>
</head>
<body>
<canvas id="lienzo" width="1000" height="1000"></canvas>
<button onclick="animacion()">Rotar</button>
</body>
<body>
<canvas id="lienzo" width="1000" height="1000"></canvas>
<button onclick="animacion()">Rotar</button>
<script>
var elemento = document.getElementById("lienzo");
var lienzo = elemento.getContext("2d");
lienzo.translate(500,500)
function iniciar()
{
var fecha = new Date()
var segundos = fecha.getSeconds()
lienzo.save()
var rad = (segundos*6*Math.PI)/180
lienzo.rotate(rad)
lienzo.fillStyle="#FF0000"
lienzo.fillRect(0,0,100,100)
lienzo.restore()
}
function animacion(){
setInterval(iniciar,1000)
}
</script>
</body>
<body>
<canvas id="lienzo" width="1000" height="1000"></canvas>
<button onclick="animacion()">Rotar</button>
<script>
var elemento = document.getElementById("lienzo");
var lienzo = elemento.getContext("2d");
lienzo.translate(500,500)
function iniciar()
{
lienzo.clearRect(-1, -1, lienzo.canvas.width, lienzo.canvas.height);
var rad = 6 * Math.PI / 180
lienzo.rotate(rad)
lienzo.fillStyle="#FF0000"
lienzo.fillRect(0,0,100,100)
}
function animacion(){
setInterval(iniciar,1000)
}
</script>
</body>