Girar una imagen con HTML5

Buenas, en este código os mostraré como girar una imagen utilizando un elemento canvas de html5:

        <script type="text/javascript">
            window.onload = function() {
                var drawingCanvas = document.getElementById('myDrawing');

                // compruebo que pueda soportar el canvas
                if(drawingCanvas && drawingCanvas.getContext) {
                    // inicializo para "dibujar" en 2D
                    var context = drawingCanvas.getContext('2d');

                    //aquí es donde giro la imagen
                    context.rotate(0.05);

                    //cargo la imagen y lo asigno al canvas
                    var myImage = new Image();
                    myImage.onload = function() {
                        context.drawImage(myImage, 30, 15, 130, 110);
                    }
                    myImage.src = "http://www.forohtml5.com/forohtml5.jpg";

                }
            }
        </script>

Luego como siempre llamamos al canvas, poniendo además el código de canvas no soportado, tened en cuenta que no todos los navegadores soportan actualmente el lenguaje de este nuevo html5.

<canvas id="myDrawing" width="200" height="200">
    <p>tu navegador no soporta canvas.</p>
</canvas>

Espero que les sea útil.


Nestor Benjamin 04 Jun 2013 00:49:25

Muy bueno. Gracias por compartir.

Tambien se puede hacer con Css3 de una manera mucho mas sencilla y facil.
Y según lo programes puedes hacer rotar la imagen o contenedor desde el eje X o Y segun los grados que le pongas.

-webkit-transform: rotate(30deg);  Esto es para que funcione en safari y chrome

-ms-transform: rotate(30deg);  Esto es para que funcione en internet explorer

-moz-transform: rotate(30deg);    Esto es para que funcione en mozilla firefox

-o-transform: rotate(30deg);    Esto es para que funcione en opera

-khtml-transform: rotate(30deg);    Esto es para que funcione en google Chrome

-chrome-transform: rotate(30deg);


AgustinB 05 Sep 2013 13:37:24

Efectivamente, con css3 es mucho mas sencillo, y no necesitas javascript, en mi web tengo un articulo sobre como rotar objetos con css3 por si le interesa a alguien. Salu2

Como saber si el navegador soporta los Canvas de HTML5

Os pego un pequeño script con el cual saber si podremos usar el nuevo objeto canvas de HTML5. Sabemos que los navegadores como Mozilla y chrome lo soportan desde casi el principio y que Internet explorer está en proceso, seguramente la siguiente versión. Pero para ahorrarnos problemas, ahí teneis el código:

var canvas = document.getElementById('html5');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // aquí va el código si lo soporta
} else {
  // aquí si no lo soporta
}

Ya solo quedaría hacer la declaración normal al canvas:
<canvas id="tutorial" width="150" height="150"></canvas>

Espero que os sirva!


administrador 09 Sep 2010 14:35:42

También se puede hacer desde el mismo html sin usar .js  .

<div id="container">
      <canvas id="canvasx" width="400" height="300">
        <p>Desde forohtml5.com le sentimos comunicar que su Navegador
            no soporta el elemento canvas de html5</p>
        <p>Use alguno de estos navegadores: <a href="http://www.opera.com">Opera</a>, <a
          href="http://www.mozilla.com">Firefox</a>, <a
          href="http://www.apple.com/safari">Safari</a>, and <a
          href="http://www.konqueror.org">Konqueror</a>.</p>
      </canvas>
    </div>

Eso si para saber si funcionan determinadas propiedades del canvas de html5 tendriamos que usar javascript.

Se pueden usar elementos de html4 y html5 a la vez

Esta es mi duda como especifíco que mi código es html5 o html4, y puedo mezclar elementos de ambos?  Graciass.


administrador 07 Sep 2010 07:27:11

HOla:

En realidad puedes usar todas las etiquetas de html4 y html5 mezcladas, siempre y cuando tu navegador soporte los elementos de html5, de esta manera aunque haya etiquetas que ya no existan en html5 como <center>, tu navegador seguirá interpretándola, aunque <center> en html5 se haría con css.  Así podrías encontrarte código híbrido:

<center><time id="forohtml5time"/><center>

Aunque html5 no está concluso y con el tiempo se irán implementando todas las capacidades y etiquetas disponibles.

Como se usa el comando date de html5

BUenas intento usar el date pero no sé como se usa o no me formatea bien las fechas, o es q mi chrome no lo soporta ese comando aunque he probado con varios, alguien me puede decir cómo se usa?


Wkaka 05 Sep 2010 14:49:00

Creo que el tag que te refieres es <time>, creo que <date> no existe


Dragón 05 Sep 2010 15:27:14

¿Por qué no exponeis un ejemplo de lo que estais haciendo y lo que quereis hacer? Creo que se os podría ayudar mejor 😀


administrador 05 Sep 2010 15:40:05

Buenas creo que te refieres a como usar la información de la etiqueta <time>.

<time> tiene un atributo específico llamado datetime el cual nos muestra el formato exacto de la fecha que estamos planteando. Este atributo nos ayuda a jugar con nuestro elemento por ejemplo al relacionarlo con una base de datos, o al rellenarlo desde la misma, con una fecha exacta y en un formato entendible.

Ejemplo,  primero el html:

<!DOCTYPE HTML>
<html>
<head>
<title>Etiqueta time forohtml5.com</titke>
<script type="text/javascript"
    src="time.js"></script
</head>
<body>
Tengo una cita el día de <time id="timex" datetime="2024-05-12">Mi cumple</time>
</body>
</html>

Y aquí el time.js que nos hace un alert del datetime de nuestro elemento time:

/***
@author: rmr
@date: 9/2010
@site http://forohtml5.com
****/

window.addEventListener('load', function () {

  // Initialization sequence.
  function init () {
var timehtml5 = document.getElementById('timex'); // sacamos time
alert(timehtml5.datetime)
}
  init();
}, false);

Espero que esto resuelva tus dudas.

Pintando canvas html5

Hola bienvenidos a forohtml5.com.
Un sencillo ejemplo de como interactuar con el elemento canvas de html5, se mostrará como pintar cuadros al pasar el ratón por encima del canvas y como ir cambiando el color dependiendo de la posición:

El html5 marco de trabajo:

<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Pintando canvas html5 — forohtml5.com </title>
    <script type="text/javascript"
    src="simple.js"></script>
  </head>
  <body>
    <div id="container">
      <canvas id="canvasx" width="400" height="300">
        <p>Desde forohtml5.com le sentimos comunicar que su Navegador
            no soporta el elemento canvas de html5</p>
        <p>Use alguno de estos navegadores: <a href="http://www.opera.com">Opera</a>, <a
          href="http://www.mozilla.com">Firefox</a>, <a
          href="http://www.apple.com/safari">Safari</a>, and <a
          href="http://www.konqueror.org">Konqueror</a>.</p>
      </canvas>
    </div>
  </body>
</html>

Y nuestro script llamado simple.js:

/***
@author: rmr
@date: 8/2010
@site http://forohtml5.com
****/

if(window.addEventListener) {
window.addEventListener('load', function () {
  var canvas, modo2d;

function init () {
   
    canvas = document.getElementById('canvasx'); // sacamos canvas

    modo2d = canvas.getContext('2d');  // modo de trabajo en 2d

 
    canvas.addEventListener('mousemove', DOpintar, false);

  }

  function DOpintar (evento) {

    var x, y;

      if (evento.layerX || evento.layerX == 0) { // MOzilla
      x = evento.layerX;
      y = evento.layerY;
    } else if (evento.offsetX || evento.offsetX == 0) { // Opera
      x = evento.offsetX;
      y = evento.offsetY;
    }

 
modo2d.lineWidth  = 1;
modo2d.fillRect(x, y, 10, 10);
modo2d.fillStyle  = '#'+x+y+'f';

  }

  init();
}, false); }


Vordarxis 10 Jan 2011 09:21:23

Por fin encuentro un foro de html5 en castellano. Ya era hora.

Bueno, recién registrado y dando la chapa. Justo antes de la declaración de la función init hay un punto que puede darle la lata al que esté empezando. Basta con borrarlo y funcionará perfectamente.


Experto 10 Jan 2011 10:29:16

Bienvenido Vordarxis pasa y acomodate 😀


administrador 10 Jan 2011 14:23:24

Gracias Vordarxis, ya se ha corregido.