Что такое HTML5 canvas?

StackOverflow https://stackoverflow.com/questions/2483780

  •  21-09-2019
  •  | 
  •  

Вопрос

Я немного сбит с толку тем, что такое HTML5 canvas.Мне сказали, что это JavaScript, но, кажется, это гораздо важнее?

  1. Чем он отличается от javascript?

  2. Почему это так удивительно?

  3. Делает ли он что-то еще, кроме JavaScript?

Это было полезно?

Решение

Я предлагаю вам прочитать эту статью HTML5 Canvas - основы

Но вкратце.Это не заменяет javascript.

HTML 5 холст предоставляет вам простой и мощный способ рисования графики с использованием JavaScript.Для каждого элемента canvas вы можете использовать "контекст" (подумайте о странице в блокноте для рисования), в который вы можете вводить команды JavaScript для рисования все, что вы хотите.Браузеры могут реализовывать несколько контекстов canvas и различные API обеспечивают рисование функциональность.

Другие советы

В canvas является в основном img элемент, который вы можете нарисовать с помощью javascript.

В Элемент холста по сути, это холст для рисования, на котором можно программно нарисовать;своего рода инструмент для рисования растровых изображений с возможностью написания сценариев для Интернета.

Я полагаю, что "удивительная" вещь в этом, помимо того факта, что теперь мы все можем с легкостью создавать веб-клоны MS Paint, заключается в том, что у вас есть гораздо более богатая область абсолютно свободной формы для создания сложной графики на стороне клиента и "на лету".Вы можете рисовать красивые графики или что-то делать с фотографиями.Якобы, вы тоже можете делать анимацию!

В Центре разработчиков Mozilla есть разумный учебник если вы хотите это попробовать.

Прежде всего, Canvas - это НЕ JavaScript!Это 2 совершенно разные вещи.

Canvas - это элемент HTML5, который можно использовать для рендеринга графики, анимаций, графических изображений, композиций из фотографий или любых других визуальных объектов "на лету" с помощью JavaScript.Чаще всего canvas используется для создания веб-игр и онлайн-презентаций.

  • Холст - Прямоугольная область, похожая на белую бумагу
  • Контекст - Возвращает объект, используя то, что мы можем вызвать многими функциями, которые используются для рисования графики и анимации на холсте (например, как карандаши используются на бумаге)

Смотрите следующий пример, в котором рисуется линия на холсте:

<html>
      <body>
       <canvas id="c" width="200" height="200" style="border:1px solid"></canvas>
        <script>
          var canvas = document.getElementById("c");//get the canvas in javascript
          var context = canvas.getContext("2d");//getcontext on canvas
          context.beginPath();//start the path.we are going to draw the line
          context.moveTo(20,20);//starting point of Line
          context.lineTo(40,20);//ending point of Line
          context.stroke(); //ink used for drawing Line (Default: Black)
        </script>
      </body>
    </html>

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top