mozilla
Your Search Results

    Базовое использование Canvas

    Элемент <canvas>

    Давайте начнем этот урок с изучения элемента <canvas> как такового. В конце этой страницы Вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.

    <canvas id="tutorial" width="150" height="150"></canvas>
    

    Он выглядит как елемент <img>, но только отличие в том что он не имеет аттрибутов src и alt. Элемент <canvas> имеет только два аттрибута - ширину и высоту. Оба ино не обязательны и могут быть выставлены с исользованием свойтв DOM. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной 300 писелей и в высоту 150 пикселей. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.

    Примечание: Если вид вашего изображения кажется вам искаженным, попробуйте указать свои атрибуты ширину и высоту в явном виде в аттрибутах <canvas> , а не с помощью CSS.

    Артибут id не специфичен для элемента <canvas> но он может быть применен по умолчанию  в атрибутах HTML так как он можеть быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать id, так как это позволяет намного проще идентифицировать наш элемент в сценарии.

    Элемент <canvas> может быть стилизован также как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны canvas будет по умолчанию абсолютно прозрачным.

    Запасное содержимое

    Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент <canvas>, Вам следует предоставить запасное содержимое для отображения этими браузерами.

    Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента <canvas>. Браузеры, которые не поддерживают <canvas> проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают <canvas> проигнорируют запасное содержимое, и просто нормально отобразят canvas.

    Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:

    <canvas id="stockGraph" width="150" height="150">
      current stock price: $3.15 +0.15
    </canvas>
    
    <canvas id="clock" width="150" height="150">
      <img src="images/clock.png" width="150" height="150" alt=""/>
    </canvas>
    

    Требуется тег </canvas>

    В отличии от элемента <img>, элемент <canvas>  требует закрывающийся тег (</canvas>).

    Note: Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.

    If fallback content is not needed, a simple <canvas id="foo" ...></canvas> is fully compatible with all browsers that support canvas at all.

    The rendering context

    <canvas> creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context ("experimental-webgl") based on OpenGL ES.

    The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The <canvas> element has a method called getContext(), used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify "2d".

    var canvas = document.getElementById('tutorial');
    var ctx = canvas.getContext('2d');
    

    The first line retrieves the DOM node for the <canvas> element by calling the document.getElementById() method. Once you have the element node, you can access the drawing context using its getContext() method.

    Проверка поддержки

    The fallback content is displayed in browsers which do not support <canvas>. Scripts can also check for support programatically by simply testing for the presence of the getContext() method. Our code snippet from above becomes something like this:

    var canvas = document.getElementById('tutorial');
    
    if (canvas.getContext){
      var ctx = canvas.getContext('2d');
      // drawing code here
    } else {
      // canvas-unsupported code here
    }
    

    A skeleton template

    Here is a minimalistic template, which we'll be using as a starting point for later examples.

    <html>
      <head>
        <title>Canvas tutorial</title>
        <script type="text/javascript">
          function draw(){
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext){
              var ctx = canvas.getContext('2d');
            }
          }
        </script>
        <style type="text/css">
          canvas { border: 1px solid black; }
        </style>
      </head>
      <body onload="draw();">
        <canvas id="tutorial" width="150" height="150"></canvas>
      </body>
    </html>
    

    The script includes a function called draw(), which is executed once the page finishes loading; this is done by using the load event on the document. This function, or one like it, could also be called using window.setTimeout(), window.setInterval(), or any other event handler, as long as the page has been loaded first.

    Here's what the template looks like in action:

    Простой пример

    Для начала, давайте посмотрим на простой пример, который рисует два интересных прямоугольника, один из которых имеет прозрачность alpha. Мы изучим как это работает более детально в последующих примерах.

    <html>
     <head>
      <script type="application/javascript">
        function draw() {
          var canvas = document.getElementById("canvas");
          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="canvas" width="150" height="150"></canvas>
     </body>
    </html>
    

    Этот пример выглядит так:

    ScreenshotLive sample

    Метки документа и участники

    Contributors to this page: Neir, hmelenok, Techno1994
    Обновлялась последний раз: Neir,