На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
  
> вывод изображения, canvas
    Здравствуйте!

    default.html
    ExpandedWrap disabled
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8" />
          <title>Вывод изображения</title>
        
          <!-- DrawImageExample references -->
          <link href="/css/default.css" rel="stylesheet" />
          <script src="/js/jquery-3.2.1.js"></script>    
          <script src="/js/default.js"></script>    
      </head>
      <body>
          <canvas id='canva'>Обновите браузер</canvas>      
      </body>
      </html>

    default.js
    ExpandedWrap disabled
      (function ($) {  
          $(document).ready(
              function () {
                  var
                      canva = $('#canva'), //<-- тут исключение
                      ctx = canva.getContext('2d'),  
                      pic = new Image();              
       
                  pic.src = '/images/Diagram.png';
       
                  // Рисуем изображение
                  ctx.drawImage(pic, 0, 0, 64, 64);
              }
          );
      })(jQuery);

    ничего не выводит, а вот если запускать из VS2013 то выбрасывает исключение на строку canvas = $('#canvas'), если же заменить на
    ExpandedWrap disabled
      var canvas = document.getElementById("canvas"),

    то из среды выводит картинку, а вот запуская через броузер ничего нет.
    пробовал MS Edge, Google Chrome 58.
    Зовите меня Гена! Просто Гений! :lool:
    ---------------------------------------
    Гений юзает Atom + Node :D
    "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
    "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
      Цитата Cfon @
      canvas = $('#canvas')

      Цитата Cfon @
      <canvas id='canva'>Обновите браузер</canvas>

      Право — это возведенная в закон справедливость. Закон есть этика, высеченная в логике.
        Цитата Астарот @

        там опечатка :)
        на самом деле вот так
        ExpandedWrap disabled
          canvas = $('#canva')

        или так
        ExpandedWrap disabled
          var canvas = document.getElementById("canva"),

        не работает никак :wacko:
        Сообщение отредактировано: Cfon -
        Зовите меня Гена! Просто Гений! :lool:
        ---------------------------------------
        Гений юзает Atom + Node :D
        "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
        "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
          id уже добавляет переменную в window

          Добавлено
          ExpandedWrap disabled
            <canvas id="some"></canvas>
            <script>
            console.log(some);
            </script>


          Добавлено
          Ну и да:
          Скрытый текст
          1) Скрипты надо грузить асинхронно, чтобы не блокировать поток исполнения
          2) Выкинуть нафиг jq за ненадобностью
          3) Выкинуть нафиг студию - она только для C# подходит и поставить нормальную IDE https://www.jetbrains.com/ :D
          user posted image
            Цитата Serafim @
            Скрипты надо грузить асинхронно, чтобы не блокировать поток исполнения

            А это как? :rolleyes: И уже не модно все скрипты сливать в один?

            Право — это возведенная в закон справедливость. Закон есть этика, высеченная в логике.
              Цитата Астарот @
              А это как? И уже не модно все скрипты сливать в один?

              Если юзается http2, то не обязательно. А так - да, собираешь в один + можбыть чанки для малоюзабельных страниц. А как - добавить атрибут async для тегов скриптов. А то сейчас скрипты лочат страницу до тех пор, пока они не загрузились и не скопилились (хотя всякие модные браузеры умеют уже это обходить вроде как).
              user posted image
                Цитата Serafim @
                Если юзается http2

                А он уже поддерживается? Во прогресс прет!

                Право — это возведенная в закон справедливость. Закон есть этика, высеченная в логике.
                  Цитата Serafim @
                  id уже добавляет переменную в window
                  Добавлено
                  ExpandedWrap disabled
                    <canvas id="some"></canvas>
                    <script>
                    console.log(some);
                    </script>

                  разобрался дело было в событии onload, ну и путь в моем случае был некорректным, теперь все пучком.
                  кроме непоняток с jQuery, она не работает с канвой? идет исключение если через $("#canva1")
                  ExpandedWrap disabled
                    (function ($) {    
                        $(document).ready(
                            function () {
                                var
                                    canvas = document.getElementById("canva1"),
                                    //canvas = $("#canva1"), //<-- через jQuery исключение
                                    ctx = canvas.getContext('2d'),  
                                    pic = new Image();            
                     
                                pic.src = 'images/Diagram.png'; //<-- тут убрал слеш '/' впереди
                     
                                pic.onload = function () {      //<-- ждём момента пока загрузится изображение
                                    ctx.drawImage(pic, 0, 0, 64, 64);
                                }            
                            }
                        );
                    })(jQuery);


                  Цитата Serafim @
                  Ну и да:
                  Скрытый текст
                  1) Скрипты надо грузить асинхронно, чтобы не блокировать поток исполнения
                  2) Выкинуть нафиг jq за ненадобностью
                  3) Выкинуть нафиг студию - она только для C# подходит и поставить нормальную IDE https://www.jetbrains.com/ :D

                  не пока студия устраивает, оформление, подсказки и тп.
                  пробовал Atom от GitHub, вроде норм, но как мне показалось в студии шрифт более четкий, чем в редакторе Atoma, ну и общее оформление кода в студии больше нравиться, опять же в студии мона сразу запускать и смотреть результат в его среде без переключения на броузер.
                  позже проверю JetBrains WebStorm ;)
                  Сообщение отредактировано: Cfon -
                  Зовите меня Гена! Просто Гений! :lool:
                  ---------------------------------------
                  Гений юзает Atom + Node :D
                  "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
                  "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
                    Цитата Астарот @

                    А он уже поддерживается? Во прогресс прет!

                    Дратути, у меня мой сайт на http2 :whistle:
                    user posted image
                      Цитата Serafim @
                      Дратути, у меня мой сайт на http2 :whistle:

                      У теюы есть саааайт?! :D

                      Право — это возведенная в закон справедливость. Закон есть этика, высеченная в логике.
                        Цитата Астарот @
                        У теюы есть саааайт?!

                        Нет сынок, это фантастика.
                        user posted image
                          Цитата Cfon @
                          кроме непоняток с jQuery, она не работает с канвой? идет исключение если через $("#canva1")

                          разобрался надо было обратится к элементу массива с индексом 0:
                          ExpandedWrap disabled
                            canvas = $("#canva1")[0],
                          Зовите меня Гена! Просто Гений! :lool:
                          ---------------------------------------
                          Гений юзает Atom + Node :D
                          "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
                          "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
                            Цитата Serafim @
                            Нет сынок, это фантастика.

                            А ну ка пакажка! Пакажка! А ну ка! :D

                            Право — это возведенная в закон справедливость. Закон есть этика, высеченная в логике.
                            1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
                            0 пользователей:


                            Рейтинг@Mail.ru
                            [ Script Execution time: 0,1413 ]   [ 14 queries used ]   [ Generated: 18.11.17, 12:14 GMT ]