HTML 5 a rotace obrázku – HTML / XHTML – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

HTML 5 a rotace obrázku – HTML / XHTML – Fórum – Programujte.comHTML 5 a rotace obrázku – HTML / XHTML – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
pan Hole
~ Anonymní uživatel
16 příspěvků
27. 12. 2012   #1
-
0
-

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.–
Reklama
Reklama
null_while
~ Moderátor
+6
Věrný člen
27. 12. 2012   #2
-
0
-

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
-
0
-

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
-
0
-

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.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 12 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý