Tema: Novato con canvas
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 08/01/2016, 17:17
dardosmania
 
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 ";