Introducción

El objetivo principal de canvas-event es el manejo de eventos en el elemento canvas, además de reducir la cantidad de lineas necesarias para crear una aplicación.

// API nativa canvas
//===================

 var cv = document.getElementById("canvas"),
     ctx = cv.getContext("2d");

 // dibujar circulo rojo
 ctx.save();
 ctx.beginPath();
 ctx.fillStyle = "red";
 ctx.arc(50, 50, 30, 0, Math.PI*2, true);
 ctx.closePath();
 ctx.fill();
 ctx.restore();

  // Ejemplo canvas-event
  //======================

  var ce = Cevent("canvas");

  ce.circle(50, 50, 30).attr("fill", "red").draw();

Muchas de las características de canvas-event como el encadenado de métodos y manejo de eventos fueron inspiradas en jQuery lo cual facilita su aprendizaje a personas familiarizadas con este framework.

Pasos previos

canvas-event funciona en todos los navegadores modernos con soporte html5. Los únicos requisitos son:

  • Posicionar relativamente el elemento canvas.
  • El canvas debe tener un id necesario para crear la instancia de canvas-event
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        #canvas { position: relative; }
    </style>
</head>
<body>

<canvas id="canvas" ></canvas>

<!-- scripts canvas-event-js -->
<script src="js/Class.js" type="text/javascript" ></script>
<script src="js/events.js" type="text/javascript" ></script>
<script src="js/Shape.js" type="text/javascript" ></script>

<script type="text/javascript" >
    // crear instancia canvas-event
    ce = Cevent("canvas");
    ...
    ...
</script>
</body>
</html>

Table Of Contents

Related Topics

This Page

Fork me on GitHub