martedì 18 dicembre 2012

Disegnare pixel in HTML5

In HTML5 non esiste una funzione per disegnare un pixel al di sopra di un Canvas per cui si deve ricorrere ad un paio di trucchi come

  • creare una linea di lunghezza 1
  • creare un rettangolo di lato 1
-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body { margin: 0; font-size: 2em; background-color: white; }

            #quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }
        </style>
        <script type="text/javascript">

            window.onload = function()
            {
            var canvas = document.getElementById("esempio");
                if (canvas.getContext) {
                  var context = canvas.getContext("2d");
                  //linea di lunghezza 1
                  context.beginPath();
                  context.moveTo(200,200);
                  context.lineTo(201,201);
                  context.stroke();
                  //rettangolo di lunghezza 1
                  context.beginPath();
                  context.fillRect(100,100,1,1);
                  context.stroke();
                }



                document.getElementById("quit").onmousedown = function()
                {
                    Qt.quit();
                };
                toggleElement();
            }
        </script>
    </head>
    <body>
        <a id="quit">X</a>
        <canvas id="esempio" height="200" width="350">
        <!-- Utile per inserire informazioni di default -->
        </canvas>
    </body>
</html>
-------------------------
Attenzione: se si fa girare il programma sembra che non si visualizza niente, si deve fare molta attenzione perche' i pixel sono ovviamente molto piccoli sui monitor moderni