3. Programación gráfica con <canvas> y Javascript.

SVG

1
2
3
4
5
<svg>
    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100"
        fill="url(#myGradient)"
        onmousedown="alert('hello');"/>
</svg>

Canvas 2D

1
2
3
4
5
6
7
8
9
10
11
12
13
<canvas id="canvas" width="838" height="220"></canvas>

<script>
    var canvasContext = document.getElementById("canvas").getContext("2d");
    canvasContext.fillRect(250, 25, 150, 100);

    canvasContext.beginPath();
    canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
    canvasContext.lineWidth = 15;
    canvasContext.lineCap = 'round';
    canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
    canvasContext.stroke();
</script>

Canvas 3D

Ejemplos en http://www.chromeexperiments.com/webgl

1
2
3
4
5
6
7
<canvas id="canvas" width="838" height="220"></canvas>

<script>
    var gl = document.getElementById("canvas").getContext("experimental-webgl");
    gl.viewport(0, 0, canvas.width, canvas.height);
    ...
</script>

APIs en Javascript para dibujar en <canvas>

  • API nativa. Ej, para dibujar un circulo:

    gDrawingContext.beginPath();
    gDrawingContext.arc(x, y, radius, 0, Math.PI * 2, false);
    gDrawingContext.closePath();

    gDrawingContext.strokeStyle = "#000";
    gDrawingContext.stroke();

  • Raphaeljs
    Funciona incluso en browsers que no tienen soporte para <canvas>!
    Animaciones basadas en tweening, no proporciona un loop de dibujo como es típico en las librerías de programación gráfica.

    1
    var circle = paper.circle(50, 40, 10);
  • Processingjs

Se puede escribir código en javascript o en processing. Se pueden cargar programas hechos en processing e interactuar con otros elementos de la página. Se tiene un poco mas de control sobre el proceso de dibujo y brinda APIs para dibujar, suscribirse a eventos, etc.

1
    ellipse(56, 46, 55, 55);

Ejemplo en Processing.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">

   <title>Circulos</title>

   <style type="text/css" media="screen">
      #canvas1{
         width:90%;
         height:90%;
      }
   </style>
</head>
<body>
   <canvas id="canvas1"></canvas>

   <script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="processing-1.3.6.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
      function sketchProc(p) {
         var columns = 6;
         var rows = 6;
         var columnWidth, rowHeight;
         var margin = 50;

         p.setup = function(){
            var w = $(window).width();
            var h = $(window).height();
            p.size(w,h);

            p.background(255);
            p.colorMode('HSB', 1.0);
            p.noStroke();
            p.smooth();

            columnWidth = (p.width - 2*margin) / (columns - 1);
            rowHeight = (p.height - 2*margin) / (rows - 1);

            for(var r=0;r<rows;r++){
              for(var c=0;c<columns;c++){
                 drawCircle(r,c,p.width/2,p.height/2);
              }
           }
        };

        drawCircle = function(row, col, mouseX, mouseY){

           var x = margin + columnWidth*col;
           var y = margin + rowHeight*row;

           var dx = Math.abs(x - mouseX);
           var dy = Math.abs(y - mouseY);
           var d = Math.sqrt((dx*dx) + (dy*dy));
           var r = 0.6 * d;

           p.fill(d/p.width, d/p.width, 1.0, 0.8);

           p.ellipse(x, y, r, r);
        };

        p.mouseMoved = function(){
           p.background(255);
           for(var r=0;r<rows;r++){
              for(var c=0;c<columns;c++){
                 drawCircle(r,c, p.mouseX, p.mouseY);
              }
           }
        };
     }

     var canvas = document.getElementById("canvas1");
     var processingInstance = new Processing(canvas, sketchProc);
  </script>
</body>
</html>

Ejercicio

Programe un reloj análogo con Processing.js

One thought on “3. Programación gráfica con <canvas> y Javascript.

  1. Hello admin, i see your page needs fresh posts.
    Daily updates will rank your site in google higher,
    content is king nowadays. If you are to lazy to write unique content everyday
    you should search in google for:
    Ightsero's Essential Tool

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>