Tema: Salto de linea en un texto?
Ver Mensaje Individual
  #17 (permalink)  
Antiguo 20/01/2012, 08:53
Avatar de Yedi
Yedi
 
Fecha de Ingreso: junio-2006
Ubicación: México
Mensajes: 159
Antigüedad: 17 años, 10 meses
Puntos: 2
Respuesta: Salto de linea en un texto?
Gracias por el Interes


Aqui les va el codigo completo de la página

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Mapa de Sucursales y Oficinas</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6.        <style>
  7.             body {
  8.                 margin: 0px;
  9.                 padding: 0px;
  10.                 font-family: Calibri;
  11.             }
  12.             
  13.             canvas {
  14.                 border: 1px solid #9C9898;
  15.             }
  16.             
  17.             #page {
  18.                 position: relative;
  19.                 width: 800px;
  20.                 height: 450px;
  21.             }
  22.             
  23.             #controls {
  24.                 position: absolute;
  25.                 right: 10px;
  26.                 top: 10px;
  27.                 z-index: 99999;
  28.             }
  29.             
  30.             label {
  31.                 color: white;
  32.                 vertical-align: top;
  33.             }
  34.         </style>
  35.         <script src="kinetic-v3.5.2.js">
  36.         </script>
  37.        <script>
  38.             function writeMessage(context, message){
  39.                 context.fillStyle = "white";
  40.                 context.fillRect(500, 20, 450, 200);
  41.                 context.font = "20pt Calibri";
  42.                 context.fillStyle = "blue";
  43.                 context.fillText(message, 500, 80);
  44.             }
  45.             
  46.             window.onload = function(){
  47.                 var stage = new Kinetic.Stage("container", 900, 500);
  48.                 var canvas = stage.getCanvas();
  49.                 var stageContext = stage.getContext();
  50.                 var showImageMap = false;
  51.                 
  52.                 var baja = "Baja California '<br>' zzzz";
  53.                               
  54.                 var planets = {
  55.                     "SUCURSAL TIJUANA, B.C.": {
  56.                         x: 35,
  57.                         y: 35,
  58.                         radius: 11,
  59.                 
  60.                     },
  61.                    "SUCURSAL MEXICALI, B.C.": {
  62.                         x: 179,
  63.                         y: 126,
  64.                         radius: 6
  65.                     }, 
  66.                     "OFICINA LA PAZ, B.C.": {
  67.                         x: 366,
  68.                         y: 127,
  69.                         radius: 6
  70.                     },
  71.                     "SUCURSAL HERMOSILLO, SON": {
  72.                         x: 515,
  73.                         y: 127,
  74.                         radius: 6
  75.                     },
  76.                     "Baja CaliforniaTel. 123": {
  77.                         x: 200,
  78.                         y: 100,
  79.                         radius: 6
  80.                     }
  81.                 };
  82.                 
  83.                 var imageObj = new Image();
  84.                 imageObj.onload = function(){
  85.                     // draw planets
  86.                     stageContext.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
  87.                     
  88.                     // draw shape overlays
  89.                     for (var pubKey in planets) {
  90.                         (function(){
  91.                             var key = pubKey;
  92.                             var planet = planets[key];
  93.                             
  94.                             var planetOverlay = new Kinetic.Shape(function(){
  95.                                 var context = this.getContext();
  96.                                 context.beginPath();
  97.                                 context.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2, false);
  98.                                 context.closePath();
  99.                                 
  100.                                 if (this.fill) {
  101.                                     context.fillStyle = "red";
  102.                                     context.fill();
  103.                                 }
  104.                             });
  105.                             
  106.                             planetOverlay.on("mouseover", function(){
  107.                                 writeMessage(stageContext, key);
  108.                             });
  109.                             planetOverlay.on("mouseout", function(){
  110.                                 writeMessage(stageContext, "");
  111.                             });
  112.                             
  113.                            
  114.                             planetOverlay.fill = false;
  115.                             stage.add(planetOverlay);
  116.                         }());
  117.                     }
  118.                     
  119.                     var checkbox = document.getElementById("checkbox");
  120.                     checkbox.addEventListener("click", function(){
  121.                         showImageMap = !showImageMap;
  122.                         var shapes = stage.getShapes();
  123.                         
  124.                         // reset fill property
  125.                         for (var n = 0; n < shapes.length; n++) {
  126.                             var shape = shapes[n];
  127.                             shape.fill = showImageMap;
  128.                         }
  129.                         
  130.                         stage.draw();
  131.                     }, false);
  132.                     
  133.                 };
  134.                 imageObj.src = "images/mapasucyof.png";
  135.             };
  136.         </script>
  137. </head>
  138. <body onmousedown="return false;">
  139. <header>
  140. </header>
  141. <section>  
  142. <div id="page" >
  143.             <div id="container" class="back"></div>
  144.             <div id="controls">
  145.                 <input type="checkbox" id="checkbox">
  146.                 <label>
  147.                     Show map overlay
  148.                 </label>
  149.             </div>
  150.  
  151.         </div>
  152.  
  153. </section>
  154. </body>
  155. </html>

El código de kinetic lo descargue de la siguiente liga:
http://www.html5canvastutorials.com/...etic-v3.6.0.js

Y el ejemplo original es el siguiente: http://www.html5canvastutorials.com/.../#comment-3113


Gracias