Foros del Web » Creando para Internet » HTML »

Novato con canvas

 Estas en el tema de Novato con canvas en el foro de HTML en Foros del Web. Hola buenas Resulta que me estoy inicializando en esto de html5 y canvas y para empezar a ver las opciones de canvas he decidido ponerme ...
  #1 (permalink)  
Antiguo 08/01/2016, 16:35
 
Fecha de Ingreso: julio-2015
Mensajes: 85
Antigüedad: 8 años, 9 meses
Puntos: 4
Novato con canvas
Hola buenas

Resulta que me estoy inicializando en esto de html5 y canvas y para empezar a ver las opciones de canvas he decidido ponerme a hacer lineas y esas cosa y mi sorpresa es que el canvas ocupa 300px X 150px hasta ahi lo veo normal. lo que sucede es que si hago una linea que se sale de ese cuadrado el canvas no se hace tan grande como su contenido y si pruebo a ponerle width: auto; y height: auto; se queda igual y si pruebo a ponerle width: 500; y height: 500; me agranda la linea automáticamente y se pixela. Seguramente sea la cosa mas simple del mundo pero es que no tengo ni idea sobre este tema.

Alguien me podria decir como hago para hacer ese canvas mas grande sin que me modifique el tamaño de los elementos?

Un saludo
  #2 (permalink)  
Antiguo 08/01/2016, 16:58
Avatar de carlillos  
Fecha de Ingreso: febrero-2007
Ubicación: México
Mensajes: 245
Antigüedad: 17 años, 3 meses
Puntos: 21
Respuesta: Novato con canvas
Lo que te está sucediendo es porque estás modificando el CSS del canvas, lo que necesitas es modificar directamente el atributo en el HTML.
Código HTML: 
Ver original
  1. <canvas id="micanvas" width="500" height="500">
O también con javascript:
Código Javascript: 
Ver original
  1. var canvas = document.getElementById("micanvas");
  2. canvas.width = 500;
  3. canvas.height = 500;
  #3 (permalink)  
Antiguo 08/01/2016, 17:17
 
Fecha de Ingreso: julio-2015
Mensajes: 85
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: Novato con canvas
No sabia que tenia que ir en la misma etiqueta del elemento HTML, ahora tengo otro problema, resulta que he cogido el siguiente codigo de internet:
Código Javascript: 
Ver original
  1. ctx.save();
  2. ctx.strokeStyle="rgba(0,0,0,0)";
  3. ctx.miterLimit=4;
  4. ctx.font="normal normal normal normal 15px / 21.4286px ''";
  5. ctx.font="   15px ";
  6. ctx.scale(0.1694915254237288,0.1694915254237288);
  7. ctx.save();
  8. ctx.font="   15px ";
  9. ctx.save();
  10. ctx.fillStyle="#FFB564";
  11. ctx.font="   15px ";
  12. ctx.beginPath();
  13. ctx.moveTo(288.7,187.7);
  14. ctx.bezierCurveTo(235,155.1,168.89999999999998,188.7,168.89999999999998,188.7);
  15. ctx.bezierCurveTo(168.89999999999998,188.7,180.49999999999997,281.29999999999995,180.29999999999998,310.1);
  16. ctx.bezierCurveTo(179.49999999999997,312.1,179.29999999999998,314.20000000000005,179.89999999999998,316.40000000000003);
  17. ctx.bezierCurveTo(179.7,317.6,179.29999999999998,318.1,178.89999999999998,318.1);
  18. ctx.lineTo(180.59999999999997,318.1);
  19. ctx.bezierCurveTo(181.69999999999996,321.1,183.49999999999997,322.40000000000003,186.39999999999998,323.40000000000003);
  20. ctx.bezierCurveTo(197.29999999999998,327.40000000000003,207.89999999999998,330.20000000000005,219.49999999999997,331.1);
  21. ctx.bezierCurveTo(223.09999999999997,331.40000000000003,226.59999999999997,331.3,229.99999999999997,330.90000000000003);
  22. ctx.bezierCurveTo(231.59999999999997,332.40000000000003,233.99999999999997,333.3,237.09999999999997,333.00000000000006);
  23. ctx.bezierCurveTo(250.29999999999995,331.80000000000007,265.09999999999997,331.1000000000001,275.7,322.70000000000005);
  24. ctx.bezierCurveTo(277.4,321.30000000000007,278.4,320.00000000000006,278.8,318.00000000000006);
  25. ctx.lineTo(279.6,318.00000000000006);
  26. ctx.lineTo(288.7,187.7);
  27. ctx.closePath();
  28. ctx.fill();
  29. ctx.stroke();
  30. ctx.restore();
  31. ctx.save();
  32. ctx.fillStyle="#52E2D7";
  33. ctx.font="   15px ";
  34. ctx.beginPath();
  35. ctx.moveTo(173.2,146.4);
  36. ctx.lineTo(180.5,184);
  37. ctx.lineTo(206.6,177.2);
  38. ctx.lineTo(200.1,144);
  39. ctx.lineTo(173.2,146.4);
  40. ctx.closePath();
  41. ctx.fill();
  42. ctx.stroke();
  43. ctx.restore();
  44. ctx.save();
  45. ctx.fillStyle="#FFFBE8";
  46. ctx.font="   15px ";
  47. ctx.beginPath();
  48. ctx.moveTo(222.6,133.8);
  49. ctx.bezierCurveTo(222.6,133.8,204.7,118.20000000000002,217.29999999999998,173.70000000000002);
  50. ctx.bezierCurveTo(217.89999999999998,176.20000000000002,236.7,177.10000000000002,236.7,177.10000000000002);
  51. ctx.lineTo(222.6,133.8);
  52. ctx.closePath();
  53. ctx.fill();
  54. ctx.stroke();
  55. ctx.restore();
  56. ctx.save();
  57. ctx.fillStyle="#F9A035";
  58. ctx.font="   15px ";
  59. ctx.beginPath();
  60. ctx.moveTo(188.6,181.4);
  61. ctx.bezierCurveTo(188.6,181.4,168,181.4,168,193.8);
  62. ctx.bezierCurveTo(168.1,211,181.4,299.4,181.1,313.70000000000005);
  63. ctx.bezierCurveTo(180.9,323.00000000000006,200.2,327.30000000000007,200.2,327.30000000000007);
  64. ctx.fill();
  65. ctx.stroke();
  66. ctx.restore();
  67. ctx.save();
  68. ctx.fillStyle="#FFB564";
  69. ctx.font="   15px ";
  70. ctx.beginPath();
  71. ctx.moveTo(200.2,93.3);
  72. ctx.bezierCurveTo(200.2,93.3,209.89999999999998,143.5,211.79999999999998,141.7);
  73. ctx.bezierCurveTo(213.79999999999998,139.89999999999998,222.6,133.79999999999998,222.6,133.79999999999998);
  74. ctx.lineTo(209.1,93.29999999999998);
  75. ctx.lineTo(200.2,93.29999999999998);
  76. ctx.closePath();
  77. ctx.fill();
  78. ctx.stroke();
  79. ctx.restore();
  80. ctx.save();
  81. ctx.fillStyle="#FFFBE8";
  82. ctx.font="   15px ";
  83. ctx.beginPath();
  84. ctx.moveTo(184.1,123.6);
  85. ctx.bezierCurveTo(184.1,123.6,171.2,148.2,173.2,146.4);
  86. ctx.bezierCurveTo(175.2,144.6,200.2,144,200.2,144);
  87. ctx.lineTo(184.1,123.6);
  88. ctx.closePath();
  89. ctx.fill();
  90. ctx.stroke();
  91. ctx.restore();
  92. ctx.save();
  93. ctx.fillStyle="#F25F68";
  94. ctx.font="   15px ";
  95. ctx.beginPath();
  96. ctx.moveTo(257.9,92.8);
  97. ctx.bezierCurveTo(256.4,94.8,254.89999999999998,96.89999999999999,253.49999999999997,99.1);
  98. ctx.bezierCurveTo(252.29999999999998,101,250.59999999999997,101.39999999999999,248.89999999999998,101);
  99. ctx.bezierCurveTo(247.2,104.4,245.39999999999998,107.7,243.2,110.8);
  100. ctx.bezierCurveTo(237,133.2,242.5,152.5,234.5,174.6);
  101. ctx.bezierCurveTo(233.2,178.1,234.8,174.9,236.7,177.1);
  102. ctx.bezierCurveTo(242.29999999999998,174.1,267.8,180.6,275.4,181.29999999999998);
  103. ctx.bezierCurveTo(277.09999999999997,178.99999999999997,266.29999999999995,177.99999999999997,265.09999999999997,174.7);
  104. ctx.bezierCurveTo(266.49999999999994,178.6,265.29999999999995,169.5,265.29999999999995,168.6);
  105. ctx.bezierCurveTo(265.59999999999997,166,265.29999999999995,163.1,265.59999999999997,160.5);
  106. ctx.bezierCurveTo(266.29999999999995,155.9,264.2,154.1,264.79999999999995,149.5);
  107. ctx.bezierCurveTo(266.69999999999993,135,268.19999999999993,120.1,267.79999999999995,105.4);
  108. ctx.bezierCurveTo(265.59999999999997,101.5,263.69999999999993,97.5,262.19999999999993,93.30000000000001);
  109. ctx.bezierCurveTo(261,92.9,259.4,92.7,257.9,92.8);
  110. ctx.closePath();
  111. ctx.fill();
  112. ctx.stroke();
  113. ctx.restore();
  114. ctx.restore();
  115. ctx.save();
  116. ctx.font="   15px ";
  117. ctx.save();
  118. ctx.fillStyle="rgba(0,0,0,0)";
  119. ctx.strokeStyle="#AF3A46";
  120. ctx.lineWidth=4.9763;
  121. ctx.lineCap="square";
  122. ctx.lineJoin="round";
  123. ctx.miterLimit="10";
  124. ctx.font="   15px ";
  125. ctx.beginPath();
  126. ctx.moveTo(238,171.1);
  127. ctx.lineTo(245.2,109);
  128. ctx.lineTo(260.4,86.9);
  129. ctx.lineTo(267.7,110.8);
  130. ctx.lineTo(265.1,174.8);
  131. ctx.fill();
  132. ctx.stroke();
  133. ctx.restore();
  134. ctx.save();
  135. ctx.fillStyle="rgba(0,0,0,0)";
  136. ctx.strokeStyle="#AF3A46";
  137. ctx.lineWidth=4.9763;
  138. ctx.lineCap="square";
  139. ctx.lineJoin="round";
  140. ctx.miterLimit="10";
  141. ctx.font="   15px ";
  142. ctx.beginPath();
  143. ctx.moveTo(180.2,182.4);
  144. ctx.lineTo(173.8,144);
  145. ctx.lineTo(184.1,123.6);
  146. ctx.lineTo(200.1,139.2);
  147. ctx.lineTo(206.6,176.2);
  148. ctx.fill();
  149. ctx.stroke();
  150. ctx.restore();
  151. ctx.save();
  152. ctx.fillStyle="rgba(0,0,0,0)";
  153. ctx.strokeStyle="#AF3A46";
  154. ctx.lineWidth=4.9763;
  155. ctx.lineCap="square";
  156. ctx.lineJoin="round";
  157. ctx.miterLimit="10";
  158. ctx.font="   15px ";
  159. ctx.beginPath();
  160. ctx.moveTo(218.2,174.8);
  161. ctx.bezierCurveTo(218.2,174.8,213.7,158.3,209.2,138.4);
  162. ctx.bezierCurveTo(204.39999999999998,117.10000000000001,199.5,94.60000000000001,200.2,93.30000000000001);
  163. ctx.bezierCurveTo(201.5,90.70000000000002,205.6,88.50000000000001,209.1,93.30000000000001);
  164. ctx.bezierCurveTo(211.1,96.00000000000001,217,114.9,222.6,133.8);
  165. ctx.bezierCurveTo(228.9,154.9,234.79999999999998,176.10000000000002,234.5,174.60000000000002);
  166. ctx.fill();
  167. ctx.stroke();
  168. ctx.restore();
  169. ctx.save();
  170. ctx.fillStyle="#AF3A46";
  171. ctx.strokeStyle="#AF3A46";
  172. ctx.lineWidth=2.4882;
  173. ctx.miterLimit="10";
  174. ctx.font="   15px ";
  175. ctx.beginPath();
  176. ctx.moveTo(200.2,93.3);
  177. ctx.bezierCurveTo(188.6,81.1,189.79999999999998,74.1,193.6,70.3);
  178. ctx.bezierCurveTo(200.2,63.699999999999996,190.79999999999998,53.699999999999996,192.7,53.5);
  179. ctx.bezierCurveTo(199.29999999999998,52.9,221.29999999999998,63.1,210,90.4);
  180. ctx.fill();
  181. ctx.stroke();
  182. ctx.restore();
  183. ctx.save();
  184. ctx.fillStyle="rgba(0,0,0,0)";
  185. ctx.strokeStyle="#AF3A46";
  186. ctx.lineWidth=4.9763;
  187. ctx.lineCap="round";
  188. ctx.lineJoin="round";
  189. ctx.miterLimit="10";
  190. ctx.font="   15px ";
  191. ctx.beginPath();
  192. ctx.moveTo(245.2,109);
  193. ctx.bezierCurveTo(245.2,109,256.5,104.2,267.7,110.9);
  194. ctx.fill();
  195. ctx.stroke();
  196. ctx.restore();
  197. ctx.save();
  198. ctx.fillStyle="#FFFBE8";
  199. ctx.strokeStyle="#AF3A46";
  200. ctx.lineWidth=4.9763;
  201. ctx.lineCap="round";
  202. ctx.lineJoin="round";
  203. ctx.miterLimit="10";
  204. ctx.font="   15px ";
  205. ctx.beginPath();
  206. ctx.moveTo(200.1,139.2);
  207. ctx.bezierCurveTo(200.1,143.89999999999998,187.9,143.89999999999998,187.9,143.89999999999998);
  208. ctx.bezierCurveTo(184.70000000000002,149.2,173.8,143.89999999999998,173.8,143.89999999999998);
  209. ctx.fill();
  210. ctx.stroke();
  211. ctx.restore();
  212. ctx.save();
  213. ctx.fillStyle="#AF3A46";
  214. ctx.font="   15px ";
  215. ctx.beginPath();
  216. ctx.moveTo(190.9,130.3);
  217. ctx.bezierCurveTo(194.3,133.60000000000002,178.9,133.8,178.9,133.8);
  218. ctx.lineTo(184,123.60000000000001);
  219. ctx.lineTo(190.9,130.3);
  220. ctx.closePath();
  221. ctx.fill();
  222. ctx.stroke();
  223. ctx.restore();
  224. ctx.save();
  225. ctx.fillStyle="rgba(0,0,0,0)";
  226. ctx.strokeStyle="#AF3A46";
  227. ctx.lineWidth=4.9763;
  228. ctx.lineCap="round";
  229. ctx.lineJoin="round";
  230. ctx.miterLimit="10";
  231. ctx.font="   15px ";
  232. ctx.beginPath();
  233. ctx.moveTo(211.8,141.6);
  234. ctx.bezierCurveTo(219.5,141.6,223.20000000000002,135.6,223.20000000000002,135.6);
  235. ctx.fill();
  236. ctx.stroke();
  237. ctx.restore();
  238. ctx.save();
  239. ctx.fillStyle="rgba(0,0,0,0)";
  240. ctx.strokeStyle="#AF3A46";
  241. ctx.lineWidth=4.9763;
  242. ctx.lineCap="round";
  243. ctx.lineJoin="round";
  244. ctx.miterLimit="10";
  245. ctx.font="   15px ";
  246. ctx.beginPath();
  247. ctx.moveTo(169,188.8);
  248. ctx.lineTo(169,188.8);
  249. ctx.bezierCurveTo(212.9,167.3,263.3,172.20000000000002,288.8,187.70000000000002);
  250. ctx.lineTo(277,321.9);
  251. ctx.bezierCurveTo(277,321.9,237.1,345.09999999999997,181.8,320.79999999999995);
  252. ctx.lineTo(169,188.8);
  253. ctx.closePath();
  254. ctx.fill();
  255. ctx.stroke();
  256. ctx.restore();
  257. ctx.save();
  258. ctx.fillStyle="rgba(0,0,0,0)";
  259. ctx.strokeStyle="#AF3A46";
  260. ctx.lineWidth=4.8228;
  261. ctx.lineCap="round";
  262. ctx.lineJoin="round";
  263. ctx.miterLimit="10";
  264. ctx.font="   15px ";
  265. ctx.beginPath();
  266. ctx.moveTo(255.7,270.4);
  267. ctx.lineTo(253.5,237.79999999999998);
  268. ctx.lineTo(229.1,218.89999999999998);
  269. ctx.lineTo(205,236.6);
  270. ctx.bezierCurveTo(205.3,248.4,206.4,259.4,206.7,271.2);
  271. ctx.bezierCurveTo(206.6,271.2,236,275.9,255.7,270.4);
  272. ctx.closePath();
  273. ctx.fill();
  274. ctx.stroke();
  275. ctx.restore();
  276. ctx.save();
  277. ctx.fillStyle="rgba(0,0,0,0)";
  278. ctx.strokeStyle="#AF3A46";
  279. ctx.lineWidth=5;
  280. ctx.lineCap="round";
  281. ctx.lineJoin="round";
  282. ctx.miterLimit="10";
  283. ctx.font="   15px ";
  284. ctx.beginPath();
  285. ctx.moveTo(229.5,219);
  286. ctx.lineTo(229.5,246);
  287. ctx.fill();
  288. ctx.stroke();
  289. ctx.restore();
  290. ctx.save();
  291. ctx.fillStyle="rgba(0,0,0,0)";
  292. ctx.strokeStyle="#AF3A46";
  293. ctx.lineWidth=3.8582;
  294. ctx.lineCap="round";
  295. ctx.lineJoin="round";
  296. ctx.miterLimit="10";
  297. ctx.font="   15px ";
  #4 (permalink)  
Antiguo 08/01/2016, 17:22
 
Fecha de Ingreso: julio-2015
Mensajes: 85
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: Novato con canvas
Código Javascript: 
Ver original
  1. ctx.beginPath();
  2. ctx.moveTo(233.2,240.8);
  3. ctx.bezierCurveTo(231.7,240.8,230.29999999999998,241.10000000000002,226.39999999999998,241.20000000000002);
  4. ctx.bezierCurveTo(226.39999999999998,241.20000000000002,225.39999999999998,240.3,226.29999999999998,247.10000000000002);
  5. ctx.bezierCurveTo(229.2,247.20000000000002,230.29999999999998,247.3,233.2,247.3);
  6. ctx.bezierCurveTo(233.2,247.4,233.2,242.5,233.2,240.8);
  7. ctx.closePath();
  8. ctx.fill();
  9. ctx.stroke();
  10. ctx.restore();
  11. ctx.restore();
  12. ctx.restore();

Lo he tenido que hacer en 2 partes porque no me dejaba en un mensaje.

Y resulta que donde yo he cogido el codigo a el le salia de esta manera el canvas:

http://s21.postimg.org/h2vqif77r/resultado.png

Mientras que a mi con el mismo codido haciendo copia y pega me sale asi:

http://s17.postimg.org/qzyzzxo1r/resultado2.png

Eso a que puede ser debido? ademas que mi imagen no sale escalada para ser un vector
  #5 (permalink)  
Antiguo 08/01/2016, 17:31
Avatar de carlillos  
Fecha de Ingreso: febrero-2007
Ubicación: México
Mensajes: 245
Antigüedad: 17 años, 3 meses
Puntos: 21
Respuesta: Novato con canvas
Canvas maneja pixeles, no vectores.
  #6 (permalink)  
Antiguo 08/01/2016, 17:50
 
Fecha de Ingreso: julio-2015
Mensajes: 85
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: Novato con canvas
Yo creia que usaba vectores igual que pasa con muchos programas de edicion y creacion de imagenes como illustrator.

y sobre porque a el le sale bien y a mi me sale mal el codigo del canvas podria ser por darle tamaño al canvas?

Etiquetas: canvas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:33.