обработка js .pde ссылка в canvas не работает на Firefox и IE

У меня есть следующие работы в Safari & Chrome на Mac. Я просто переключился, чтобы проверить Firefox Mac и IE на ПК, и он не работает. Я не могу понять, почему! Любые предложения были бы великими.обработка js .pde ссылка в canvas не работает на Firefox и IE

http://davidcool.com/experiments/follow.html

Код:

<!DOCTYPE html> 
<html> 
<head> 
    <title>follow</title> 
    <script src=processing-1.4.1.min.js></script> 
</head> 
<body> 
    <div style="width:100%; height:100%; position:absolute; top:50;"> 
     <canvas data-processing-sources="harmonograph_v2_1_logo.pde" tabindex="0" id="__processing0" width="1300" height="160"></canvas> 
    </div> 
</body> 
</html>

В соответствии с предложениями Майка, я раздели это вниз к скелету, и это до сих пор не работает в IE PC или Mac Firefox. Chrome и Safari Mac работают нормально. Я добавил в кодировку, поскольку firebug дал мне ошибку. Нет эффекта.

<!DOCTYPE html> 
<html> 
<head> 
<title>test pjs</title> 
    <meta charset='utf-8'> 
<script src="processing-1.4.1.min.js"></script> 
</head> 
<body> 
<div> 
    <canvas data-processing-sources="harmonograph.pjs"></canvas> 
</div> 
</body> 
</html>

Я также построил конвертер и преобразовал эскиз из обработки .pde файл здесь обработки JS .pjs формат: http://generactive.net/tools/pde_to_pjs/convert_to_pjs.html?#

Преобразованные файлы прекрасно работают в одних и тех же двух браузерах, а также.

Хорошо, обновление по этой проблеме. С тех пор я сменил эскиз, и теперь он работает. Так что проблема в эскизе где-то. Я не уверен, в чем проблема, или почему это работает на некоторых пивоварах, а не на других, но что-то в эскизе убивает определенные браузеры. Вышеприведенный код должен работать нормально.

источник

2013-04-11 davidcool

Что должно было произойти? Я просто вижу черную полосу как на Firefox, так и на Chrome. – Jarrod

. Расскажите, пожалуйста, что такое ожидаемое поведение. Я вижу черную полосу с анимацией рисования. –

Он должен выглядеть следующим образом: http://davidcool.com/experiments/harmonograph.png Если вы просматриваете эту страницу на Mac Safari или Chrome, она работает нормально. – davidcool

библиотека Pjs имеет специальные символы в своем названии, поэтому для этого требуется указать: <script src="processing-1.4.1.min.js"></script>. Хорошая практика - просто указывать свои строки атрибутов, так как только непрерывные строки несимвольного характера могут быть оставлены без кавычек.

На вторичной ноте вам не нужны биты tabindex="0" id="__processing0", они автоматически добавляются Pjs (если вы используете самоопределенный атрибут id, лучше дать ему настоящее имя).

И, наконец, <div style="width:100%; height:100%; position:absolute; top:50;"> не будет делать много, по высоте, если вы не указали правила CSS для html и body, которые также установили их как 100%. В принципе, конечно, чтобы сначала начать работать, я бы рекомендовал не указывать ширину и высоту как на холсте, так и на контейнере. Пусть div вычисляет размеры, необходимые для автоопределения, и пусть холст получает свой размер от вашего вызова size(...,...) внутри вашей функции setup в файле pde.

источник

2013-04-11 00:46:14

Спасибо за помощь. Я пробовал некоторые из них уже безрезультатно. Он отлично работает в Safari и Chrome на Mac. С тех пор я преобразовал файл .pde в файл .pjs с конвертером, который я построил здесь: http://generactive.net/tools/pde_to_pjs/convert_to_pjs.html?# Преобразованные файлы отлично работают на Mac Safari и Chrome как Что ж. Мой последний код редактируется выше в исходном сообщении. – davidcool

обработка js .pde ссылка в canvas не работает на Firefox и IE

ответ

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