@alto2013

Можно ли создать программно работающий элемент canvas в html документе?

почему не отрабатывает код?
<!doctype html><html>	<head> <script type="text/javascript">
var c1 = document.createElement('canvas');   c1.style.height = "400px";
c1.style.width = "400px";    ctx     = c1.getContext('2d');
ctx.fillRect(110, 110, c1.style.width, c1.style.height);
 </script> 	</head><body></body></html>
  • Вопрос задан
  • 303 просмотра
Решения вопроса 1
@ZaptoS
<!doctype html>
<html>
   <head>
      <title>canvasExample</title>
   </head>
   <body>
      <script type="text/javascript">
         var c1 = document.createElement('canvas');
         document.body.appendChild(c1);
         c1.style.height = "400px";
         c1.style.width = "400px";
         ctx     = c1.getContext('2d');
         ctx.fillRect(110, 110, parseInt(c1.style.width), parseInt(c1.style.height));    
      </script>
   </body>
</html>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
AMar4enko
@AMar4enko
Ну его ж еще надо сделать append
Ответ написан
Комментировать
Во-первых, элемент создал, а в документ не добавил
document.body.appendChild(c1);
Во-вторых,
ctx.fillRect(110, 110, c1.style.width, c1.style.height)
это ничего не нарисует, т.к. c1.style.width и c1.style.height вернет строку "400px". Приведи к числу
ctx.fillRect(110, 110, parseInt(c1.style.width), parseInt(c1.style.height))
Ответ написан
Комментировать
@GreatRash
В третьих:

// c1.style.height = "400px";
// c1.style.width = "400px";

с1.width = 400;
c1.height = 400;


Иначе канвас тупо отмасштабируется.
Ответ написан
Комментировать
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
В четвертых, не использовать в вычислениях c1.style.height и c1.style.width они могут быть в любых единицах, используйте c1.offsetHeight и c1.offsetWidth - они всегда будут числом и в пикселях
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы