HTML 5 a rotace obrázku

~ Anonymní uživatel
~ 16 příspěvků

27. 12. 2012 #1

Dobrý den,

hraji si s těmito hodinami v HTML5 a rád bych přidal ještě ručičku na druhý (světový) čas jako např. zde. Tu bych chtěl udělat jako PNG obrázek, který je před vykreslením potřebqa narotovat podle vypočteného úhlu. Vyšel jsem z tohohle tutoriálu, ale stejně to moc nefrčí.

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<title>Analog clock by Javascript feat. HTML5</title>
</head>
<body>

<canvas id="clock" width="300" height="300"></canvas>
<script type="text/javascript">
<!--

var canvas = document.getElementById('clock');

// vložení obrázku
       ruka = new Image();
       ruka.src = "hod.png";
main();


function main()
{
    if(canvas.getContext)
    {
        clock();
        setInterval('clock()', 1000);
    }
}

function clock()
{
    var context = canvas.getContext('2d');
 
    context.save();

    context.clearRect(0, 0, 300, 300);
    context.translate(150, 150);
    context.scale(1.5, 1.5);
    context.rotate( - Math.PI / 2 );
    context.save();

    // dial plate
    context.strokeStyle = "gray";
    context.fillStyle = "white";
    context.lineWidth = 4;
    context.lineCap = "round";

    context.beginPath();
    context.stroke();
    context.restore();  
    context.save();

    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
   

    // hour hand
    context.strokeStyle = "black";
    context.fillStyle = "black";
    // calculating formula for the angle of the hour hand
    // ( 2 * Math.PI / 6 ) * hour + ( ( 2 * Math.PI / 24 ) / 60 ) * minute + ( ( ( 2 * Math.PI / 24 ) /  60 ) / 60  ) * second
    context.rotate( ( Math.PI / 6) * hour + ( Math.PI / 360 ) * minute + ( Math.PI / 21600 ) * second );
    context.lineWidth = 8;
    context.lineCap = "round";
    context.beginPath();
    context.moveTo(-10, 0);
    context.lineTo(45, 0);
    context.stroke();
    context.restore();
    context.save();

    // minute hand
    context.strokeStyle = "black";
    context.fillStyle = "black";
    // calculating formula for the angle of the minute hand
    // ( 2 * Math.PI / 60 ) * minute + ( ( 2 * Math.PI /  60 ) / 60 ) * second
    context.rotate( ( Math.PI / 30 ) * minute + ( Math.PI / 1800 ) * second );
    context.lineWidth = 6;
    context.lineCap = "round";
    context.beginPath();
    context.moveTo(-14, 0);
    context.lineTo(62, 0);
    context.stroke();
    context.restore();
    context.save();

    // second hand
    context.strokeStyle = "red";
    context.fillStyle = "red";
    // calculating formula for the angle of the second hand
    // ( 2 * Math.PI / 60 ) * second
    context.rotate( Math.PI / 30 * second );
    context.lineWidth = 4;
    context.lineCap = "round";
    context.beginPath();
    context.moveTo(-15, 0);
    context.lineTo(70, 0);
    context.stroke();
    context.restore();

    // frame

    context.beginPath();
    context.lineWidth = 12;
    context.strokeStyle = "green";
    context.arc(0, 0, 90, 0, Math.PI * 2, true);
    context.stroke();
    context.restore();

// Nový kód podle http://creativejs.com/…into-canvas/
// obrázek hod.png je 500x500px
context.save(); 
context.translate(150, 150); 
context.translate(250, 250); 
context.rotate(0.15); 
context.drawImage(ruka, -150, -150); 
context.restore();
}

//-->
</script>

</body>
</html>

Případně ještě onen zpropadený obrázek.

Děkuji za případné návrhy...

Nahlásit jako SPAM

IP: 84.16.103.–

null_while

~ Moderátor

Věrný člen

27. 12. 2012 #2

Jak nefrčí? Co to dělá? Vykresluje se? Živá ukázka?

Nahlásit jako SPAM

IP: 84.16.103.–

WEBNIA.cz - tvorba webových stránek

pan Hole

~ Anonymní uživatel
~ 16 příspěvků

27. 12. 2012 #3

Zde živá ukázka: http://black-hole.cz/public/hodiny.html

Ta ručka se ani neukáže, při náhodném upravování konstant funkce context.drawImage (viz konec kódu výše) ji dostanu na canvas, ale stejně rotuje úplně nesmyslně...

Nahlásit jako SPAM

IP: 84.16.103.–

pan Hole

~ Anonymní uživatel
~ 16 příspěvků

27. 12. 2012 #4

Tak problém částečně vyřešen, byl to nesoulad velikostí. Ale ještě bych potřeboval vyřešit jednu věc - aby se nejdřív vykreslila ta ručka ze souboru a pak až ty tři další. Prostým přesunem kódu se mi to nedaří...

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<title>Analog clock by Javascript feat. HTML5</title>
</head>
<body>

<canvas id="clock" width="500" height="500"></canvas>
<script type="text/javascript">
<!--

var canvas = document.getElementById('clock');

// vložení obrázku
       ruka = new Image();
       ruka.src = "hod.png";
main();


function main()
{
    if(canvas.getContext)
    {
        clock();
        setInterval('clock()', 1000);
    }
}

function clock()
{
    var context = canvas.getContext('2d');
  context.save();

    context.clearRect(0, 0, 500, 500);
    context.translate(250, 250);
    context.scale(2.5, 2.5);
    context.rotate( - Math.PI / 2 );
    context.save();

    // dial plate
    context.strokeStyle = "gray";
    context.fillStyle = "white";
    context.lineWidth = 4;
    context.lineCap = "round";

    context.beginPath();
    context.stroke();
    context.restore();  
    context.save();

    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
 
    // hour hand
    context.strokeStyle = "black";
    context.fillStyle = "yellow";
    // calculating formula for the angle of the hour hand
    // ( 2 * Math.PI / 6 ) * hour + ( ( 2 * Math.PI / 24 ) / 60 ) * minute + ( ( ( 2 * Math.PI / 24 ) /  60 ) / 60  ) * second
    context.rotate( ( Math.PI / 6) * hour + ( Math.PI / 360 ) * minute + ( Math.PI / 21600 ) * second );
    context.lineWidth = 8;
    context.lineCap = "round";
    context.beginPath();
    context.moveTo(-10, 0);
    context.lineTo(45, 0);
    context.stroke();
    context.restore();
    context.save();

    // minute hand
    context.strokeStyle = "black";
    context.fillStyle = "black";
    // calculating formula for the angle of the minute hand
    // ( 2 * Math.PI / 60 ) * minute + ( ( 2 * Math.PI /  60 ) / 60 ) * second
    context.rotate( ( Math.PI / 30 ) * minute + ( Math.PI / 1800 ) * second );
    context.lineWidth = 6;
    context.lineCap = "round";
    context.beginPath();
    context.moveTo(-14, 0);
    context.lineTo(62, 0);
    context.stroke();
    context.restore();
    context.save();

    // second hand
    context.strokeStyle = "red";
    context.fillStyle = "red";
    // calculating formula for the angle of the second hand
    // ( 2 * Math.PI / 60 ) * second
    context.rotate( Math.PI / 30 * second );
    context.lineWidth = 4;
    context.lineCap = "round";
    context.beginPath();
    context.moveTo(-15, 0);
    context.lineTo(70, 0);
    context.stroke();
    context.restore();

    // frame

    context.beginPath();
    context.lineWidth = 12;
    context.strokeStyle = "green";
    context.arc(0, 0, 90, 0, Math.PI * 2, true);
    context.stroke();
    context.restore();
    context.save();

// obrázek hod.png je 500x500px
    context.save();
    // Translate to the center point of our image
    context.translate(ruka.width * 0.5, ruka.height * 0.5);
    // Perform the rotation
    context.rotate(0.45);
    // Translate back to the top left of our image
    context.translate(-ruka.width * 0.5, -ruka.height * 0.5);
    // Finally we draw the image
    context.drawImage(ruka, 0, 0);
    // And restore the context ready for the next loop
    context.restore(); 

context.restore();


}

//-->
</script>

</body>
</html>

Nahlásit jako SPAM

IP: 84.16.103.–

← Zpět na seznam vláken ← Zpět do Fóra