Не могу разобраться с вызовом функции
Здравствуйте.
Я пишу небольшой генератор картинок на <canvas>. В самом начале у меня на строке:
var ctx = $('#bart')[0].getContext("2d");
Вылезало: "Uncaught TypeError: Cannot call method 'getContext' of undefined " После оборачивания в
$(document).ready(function() { ...
});
Всё заработало. Написал я скрип со следующей структурой: Vars function draw(text){...} draw('test') И всё работало! Но при попытке сделать кнопочку: Код:
<input name='test' onclick='draw('bla')' type='button' value='Написать!'>Код:
Uncaught ReferenceError: draw is not definedПопытался вернуть всё "как было", но походу не получилось, т.к. Сейчас на нажатие этой же кнопочки хром реагирует так: Код:
Uncaught SyntaxError: Unexpected token }Код:
window.script1344581169582=1; |
onclick="draw('bla')"
|
Цитата:
|
С getContext я разобрался как раз этим :$(document).ready(function() { ...
});: Проблема сейчас эта: Код:
Uncaught SyntaxError: Unexpected token } |
Цитата:
|
$(document).ready(function() {
var ctx = $('#bart')[0].getContext("2d");
var sprite = new Image();
var marginTop = 48;
var marginLeft = 0;
var line = '';
var textWidth = 0;
var textCount = 0;
sprite.src = './images/sprite.png';
function draw(text){
text += ' '; //Добавляю пробел
ctx.fillStyle = '#fff';
ctx.textAlign = "left";
ctx.font = " 18px Flow ";
textWidth = ctx.measureText(text).width;
textCount = Math.floor(440/textWidth);
marginLeft = (500 - textWidth*textCount)/2+3; //КОСТЫЛЬ!!! компенсирую пробел в конце строки!
marginTop = 48; // Сбрасываю отступ сверху
sprite.onload = function() {
ctx.drawImage(sprite, 0, 0, 500, 310, 0, 0, 500, 310);
for (var tc = 0; tc < textCount; tc++){
line += text; // Формирую строку
};
for (var i = 0; i < 9; i++) {
ctx.fillText(line, marginLeft, marginTop);
marginTop += 18;
};
ctx.drawImage(sprite, 498, 128, 80, 180, 406, 118, 80, 180);
};
};
draw('test');
})
|
У Вас неправильная логика
sprite.onload не может быть внутри draw наоборот из sprite.onload надо draw вызывать
var sprite = new Image();
sprite.onload=function(e){draw('text')};
sprite.src=....
function draw(){ctx.drawImage...}
а потом когда будете кнопкой вызывать картинка уже загружена будет в прелоадер
<input type=button onclick="draw('tratata')">
|
Цитата:
Уже, нашёл) |
$(document).ready(function() {
var ctx = $('#bart')[0].getContext("2d");
var sprite = new Image();
sprite.src = './images/sprite.png';
sprite.onload=function(e){draw('text')};
var marginTop = 48;
var marginLeft = 0;
var line = '';
var textWidth = 0;
var textCount = 0;
function draw(text){
text += ' '; //Добавляю пробел
ctx.fillStyle = '#fff';
ctx.textAlign = "left";
ctx.font = " 18px Flow ";
textWidth = ctx.measureText(text).width;
textCount = Math.floor(440/textWidth);
marginLeft = (500 - textWidth*textCount)/2+3; //КОСТЫЛЬ!!! компенсирую пробел в конце строки!
marginTop = 48; // Сбрасываю отступ сверху
ctx.drawImage(sprite, 0, 0, 500, 310, 0, 0, 500, 310);
for (var tc = 0; tc < textCount; tc++){
line += text; // Формирую строку
};
for (var i = 0; i < 9; i++) {
ctx.fillText(line, marginLeft, marginTop);
marginTop += 18;
};
ctx.drawImage(sprite, 498, 128, 80, 180, 406, 118, 80, 180);
};
});
|
а зачем sprite.onload = function() {
внутри оставили-? просто оставьте marginLeft = (500 - textWidth*textCount)/2+3; marginTop = 48; ctx.drawImage(sprite, 0, 0, 500, 310, 0, 0, 500, 310); .... |
Поправил
|
На кнопку прежняя реакция:
Цитата:
|
Цитата:
теперь функция draw не глобальная и из кнопки не вызовется вы внутрь ready напишите $('#button').click(function(){draw('tratata')}); |
Заработало!!!
Оно шевелится, не совсем так как хочется..., но с этим я уже разберусь! Спасибо большое!!! А почему она больше не глобальная? |
Цитата:
если будет ссылка на сайт скиньте посмотрю что получилось |
Пожалуйста)
http://bart.grindel.su/ |
а как-нибудь
ready.drawне получится? А как без ready? |
Цитата:
<body> <div> <canvas id='bart' width='500' height='310'></canvas> </div> <form name='text'> <input id='writeButton' type=button value='Написать!'> </form> <script src='js/bart.js'></script> </body> </html> кстати у вас </htnl> |
Ещё вопросик...
Как вытащить значение из этого поля??? <input name='text' id='text' type='text' value='Напиши что-нибудь'>
$('#writeButton').click(function(){draw(document.forms.text.elements.text)});
|
Цитата:
|
Спасибо, вам ещё раз:thanks:
|
А у вас сайт открылся?
Шрифт догрузился? |
первый раз с большим трудом(там шрифт грузится?)
сейчас нормально работает Да шрифт загрузился |
Да, подгружается сторонний шрифт (39kb)
Может из-за сервера, он меня самодельный. |
vadim5june,
Не могли бы вы мне ещё рассказать в чём преимущество использования? $(document).ready(function() Мне кажется в моём скрипте можно и без jqwery обойтись |
Цитата:
без jquery-если скрипт будет в head то писать window.onload=function(e){//здесь скрипт } если в body то без этой конструкции для canvasa в jquery нет ничего полезного-можно без него //-- |
А внешним файлом файлом только с jqwey?
|
Цитата:
jquery применяйте только если она Вам нужна по каким то соображениям |
А как можно внешним файлом и без jqw?
|
Цитата:
|
Избавляюсь от jqwery
как теперь заставить работать
document.getElementById('writeIt').click(function(){draw(document.forms.form_1.elements.inputText.value)});
document.getElementById('form_1').onsubmit(function(){
|
Цитата:
либо addEventListener или
document.getElementById('writeIt').onclick=function(e){draw(do...}
аналогично для submit var canvas = $('#bart')[0];тоже меняйте на
var canvas =document.getElementById('bart');
если избавляетесь от jquery знака $ не должно нигде быть |
vadim5june, спасибо вам, в который раз!:)
|
| Часовой пояс GMT +3, время: 08:18. |