HTML5 Холст: ничья не определена

Я пытаюсь выполнить учебник Canvas Mozilla HTML5 here. но я получаю сообщение об ошибке:HTML5 Холст: ничья не определена

Uncaught ReferenceError: draw is not defined

У меня есть сценарий, как например:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

<script type="application/javascript"> 
$(function() { 

function draw() { 
     var canvas = document.getElementById("main"); 
     if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 

     ctx.fillStyle = "rgb(200,0,0)"; 
     ctx.fillRect (10, 10, 55, 50); 

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
     ctx.fillRect (30, 30, 55, 50); 
     } 
    } 


}); 

</script> 


</head> 
<body onload="draw();"> 
    <canvas id="main" width="150" height="150"></canvas> 


</body>

Я экспериментировал с размещением сценариев до и после того, как элемент холста, но я не получаю никаких изменений.

Кто-нибудь знает, что я делаю неправильно?

источник

2013-07-29 MeltingDog

Пожалуйста, поделитесь своим полным исходным кодом; потому что в этом нет ничего плохого. Убедитесь, что функция 'draw()' определена в разделе ' 'вашей страницы. В противном случае событие onload не найдет его! – Eric

@ Эрик Айв добавил его выше – MeltingDog

Вы неправильно используете jQuery здесь. Теперь ваш метод draw() доступен (и объявляется) только в методе ready(), вызываемом jQuery. Сделайте функцию глобальной и пропустите часть jQuery.

<script type="text/javascript"> 
    function draw() { 
     var canvas = document.getElementById("main"); 
     if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 

     ctx.fillStyle = "rgb(200,0,0)"; 
     ctx.fillRect (10, 10, 55, 50); 

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
     ctx.fillRect (30, 30, 55, 50); 
     } 
    } 
</script>

Вы видите $(function(){ ... }); это стенография для $(document).ready(), которые используются в качестве обратного вызова, когда все DOM-элементы загружены. В вашем случае это не нужно, так как ваш метод draw() вызывается событием onload body в любом случае! :-)

источник

2013-07-29 11:09:55 Eric

А я вижу - так как тело загружается (загружается), оно вызывает функцию? Это единственный способ сделать это с помощью Canvas? – MeltingDog

Перед вызовом метода draw() вам необходимо убедиться, что ваше DOM-дерево загружено (ваш сайт). Либо вы это сделаете, либо вы можете вызвать метод draw() внутри '$ (function() {...});'. Убедитесь, что метод рисования всегда определяется глобально. – Eric

Альтернативой приведенному выше ответом может быть отказ от использования встроенного вызова до draw() и удаление заголовка функции, чтобы он напрямую попадал в него при загрузке.

<script type="application/javascript"> 
$(function() { 
     var canvas = document.getElementById("main"); 
     if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 

     ctx.fillStyle = "rgb(200,0,0)"; 
     ctx.fillRect (10, 10, 55, 50); 

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
     ctx.fillRect (30, 30, 55, 50); 
     } 
}); 
</script>

Тогда ваше тело будет освобожден:

<body> 
<canvas id="main" width="150" height="150"></canvas> 
<!-- ... -->

источник

2013-07-29 11:15:04

HTML5 Холст: ничья не определена

ответ

Смежные вопросы