Pages

Thursday, December 27, 2012

Javascript / HTML - Find focused element 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript">
      function init() {
        console.log('init()');

        document.getElementById('btnTeste02').focus();

        var focusedElement = document.activeElement;

        console.log('Focused element: ' + focusedElement.innerHTML);

        focusedElement.click();
      }
    </script>
  </head>

  <body>
    <button id="btnTeste01" onclick="console.log('Click: ' + this.innerHTML);">Teste 01</button>
    <button id="btnTeste02" onclick="console.log('Click: ' + this.innerHTML);">Teste 02</button>
    <button id="btnTeste03" onclick="console.log('Click: ' + this.innerHTML);">Teste 03</button>
  </body>
</html>

<script type="text/javascript">
  init();
</script>
Postado por Allann Jones às 11:29 AM 0 comentários

Monday, December 03, 2012

JavaScript / Canvas / Image Data 

<html>
  <head>
    <style>
      body {
        background-color: #ccc;
      }
    </style>

    <script type="text/javascript">
      function onLoad() {
        var canvas = document.getElementById('canvas_1');

        canvas.width = 20;
        canvas.height = 20;

        if (!canvas.getContext) {
          alert('Canvas is not supported.');
        }

        var context = canvas.getContext("2d");
        
        context.fillStyle = "rgb(255,0,0)";
        context.fillRect(0, 0, canvas.width, canvas.height);

        var imageData = context.getImageData(0, 0, canvas.height, canvas.width);

        var pixels = new Array();

        for (var i = 0; i < canvas.height; i++) {
          pixels[i] = new Array();

          for (var j = 0; j < canvas.width; j++) {
            pixels[i][j] = imageData.data[i * canvas.width + j * 4];

            console.log('pixels[' + i + '][' + j + '] = ' + imageData.data[i * (canvas.width * 4) + (j * 4) + 0] + ', ' +
                                                            imageData.data[i * (canvas.width * 4) + (j * 4) + 1] + ', ' +
                                                            imageData.data[i * (canvas.width * 4) + (j * 4) + 2]);

            imageData.data[i * (canvas.width * 4) + (j * 4) + 0] = 0;   // Red
            imageData.data[i * (canvas.width * 4) + (j * 4) + 1] = 0;   // Green
            imageData.data[i * (canvas.width * 4) + (j * 4) + 2] = 255; // Blue
          }
        }

        context.putImageData(imageData, 0, 0);
      }
    </script>
  </head>

  <body onload="onLoad()">
    <canvas id="canvas_1"></canvas>
  </body>
</html>
Postado por Allann Jones às 10:44 AM 0 comentários
Subscribe to: Posts (Atom)