1. Об`єкт canvas

• Для малювання в javascript перш за все необхідно додати об'єкт canvas, який імітує «полотно» художника. Даний об'єкт підтримується всіма браузерами сучасних версій, але деякі застарілі версії не підтримують його. Значенням атрибута id також доречно призначити «canvas»:

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

• Розміри кинувся за замовчуванням: 300 px × 150 px (width × height), але можна встановлювати довільні розміри.

• Для canvas бажано встановити який-небудь стиль (css), додавши, наприклад, рамку, або задавши задній фон.

• Крім того, об'єкт може служити контейнером інших об'єктів (наприклад, зображень) і тексту:

  <canvas id = "canvas" width = "150" height = "150">
      поточна ціна акцій: $ 3.15 + 0.15
  </canvas>

• Головним методом об'єкта canvas є метод getContext () , який використовується для отримання основних функцій малювання. У методу один параметр, який вказує на підтримку типу графіки (2d або 3d).

• Додамо javascript-код зі зверненням до об'єкту canvas і установкою підтримки 2d-графіки:

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

ПЕРЕВІРКА ПІДТРИМКИ CANVAS

• Далі додамо javascript-код зі зверненням до об'єкту canvas і перевіркою підтримки його браузером:

  var canvas = document.getElementById ("canvas");
  if (canvas.getContext) {
      var ctx = canvas. getContext (" 2d ");
      // робота з канвасом
  }   else {
      // код, який не підтримує канвас
  }

• Розглянемо код повністю:

  <! DOCTYPE html>
  < html>
    < title> Полотно </ title>
    < script type = "text / javascript" >
      function draw () {
       var canvas = document. getElementById ( "canvas" );
       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 = "canvas" width = "150" height = "150">   </canvas>
   </body>
  </html>

. . .
 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, 50, 50 );

          ctx. fillStyle = "rgba (0, 0, 200, 0.5)";
          ctx. fillRect = ( 30, 30, 50, 50 );
        }
       }
. . .

МАЛЮВАННЯ ФІГУР (ПРИМІТИВІВ)

• Відлік координатної площині знаходиться в лівому верхньому кутку об'єкта canvas:

  

• Canvas підтримує малювання тільки однієї фігури - прямокутника. Інші фігури можуть вийти з прямих і точок.

• Малювання прямокутника:

  • Залитий кольором прямокутник:

    fillRect (x, y, ширина, висота)

  • Прямокутний контур:

    strokeRect (x, y, ширина, висота)

  • Очищення прямокутної області (прозорий прямокутник):

    clearRect (x, y, ширина, висота)

ВИБІР КОЛЬОРУ В CANVAS

Для вибору кольору заливки використовується метод:

• В системі RGB без вказівки рівня прозорості:

  fillStyle = 'rgb (0-255, 0-255, 0-255)';

• В системі RGB із зазначенням рівня прозорості:

  fillStyle = 'rgba (0-255, 0-255, 0-255, 0.1-0.9)';

• Як заливкa за замовчуванням стоїть чорний колір.

Рішення:

Малювання шляхів в canvas

Шлях являє собою набір точок, з'єднаних прямими лініями або кривими. Лінії можуть бути різної ширини, кривизни і кольору

Розглянемо етапи побудови шляхів і функції малювання шляхів в javascript canvas :

1. Створення шляху. Коли шлях створений інші команди вже працюють над створеним шляхом:

   beginPath ()

   void ctx. beginPath();

2. Вибір методу побудови шляху (крива, пряма, крива Безьє) або перехід в нову точку:

   • перехід в нову точку з вказаними координатами:

     CanvasRenderingContext2D.moveTo ()

     void ctx. moveTo(x, y);

   • з'єднання прямою лінією останньої використаної координатою з точкою x, y:

     CanvasRenderingContext2D.lineTo ()

     void ctx. lineTo;(x, y)

   • додавання кубічної кривої Безьє (потрібно три точки: перші дві (cp1x, cp1y, cp2x, cp2y) - контрольні, остання - кінець лінії; початковою точкою є остання зазначена точка, або точка, до якої перейшли командою moveTo ()

     CanvasRenderingContext2D.bezierCurveTo ()

     void ctx. bezierCurveTo(cp1x , cp1y , cp2x , cp2y , x , y );

   • додавання квадратичної кривої Безьє (cpx - координата х контрольної точки, cpy - координата y контрольної точки):

     CanvasRenderingContext2D.quadraticCurveTo ()

     void ctx. quadraticCurveTo (cpx, cpy, x, y);

   • додавання дуги з центром в точці x і y і радіусом r з позиції startAngle до endAngle (за замовчуванням рух дуги за годинниковою стрілкою)

     CanvasRenderingContext2D.arc ()

     void ctx. arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

   • додавання дуги, з'єднаної з попередньою точкою прямою лінією:

     CanvasRenderingContext2D.arcTo ()

     void ctx. arcTo (x1, y1, x2, y2, radius);

   • додавання еліпса до шляху з центром в точці x і y і радіусом radiusX і radiusY з початком в startAngle і закінченням у endAngle :

     CanvasRenderingContext2D.ellipse ()

     void ctx. ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

   • створення прямокутного шляху:

     CanvasRenderingContext2D.rect ()

     void ctx. rect(x, y, width, height);

3. Кінець шляху - з'єднанням прямою лінією передостанній точки з початковою точкою шляху

   closePath ()

   void ctx. closePath();

4. Малювання шляху:

   stroke()

   void ctx. stroke();
   void ctx. stroke( path );

5. Зафарбування внутрішньої області шляху:

   fill ()

   void ctx. fill();
   void ctx. fill(path);

Рішення: