Тег CANVAS

  Парный блочный тег CANVAS резервирует на Web-странице область (канву), в которой с помощью скрипта можно создавать и изменять рисунок (в том числе анимированный).
  Область рисунка, которую ещё называют - "холст", задаёт поле элемента тега CANVAS.
  Внутренний контент элемента тега CANVAS заданный в HTML-коде никак не отобразится на Web-странице.
  Для "холста", созданного элементом тега CANVAS, в DOM будет создан интерфейс HTMLCanvasElement, который, в свою очередь, и предоставляет необходимые интерфейсы для "рисования" на этом "холсте".
  Для "рисования" на "холсте", созданном элементом тега CANVAS можно подключать и дополнительные библиотеки (например - WebGL).
  Атрибуты:
  HEIGHT - Устанавливает высоту "холста".
  Значение атрибута может быть перекрыто атрибутом стиля height, однако, учитывая специфику тега CANVAS, этот CSS-атрибут к его элементу лучше не применять.
  • Значение:

    • Целое число - размер в пикселях.

  • Значение по умолчанию - 300.
  • Атрибут не обязательный.
  WIDTH - Устанавливает ширину "холста".
  Значение атрибута может быть перекрыто атрибутом стиля width, однако, учитывая специфику тега CANVAS, этот CSS-атрибут к его элементу лучше не применять.
  • Значение:

    • Целое число - размер в пикселях.

  • Значение по умолчанию - 150.
  • Атрибут не обязательный.


Пример:
<CANVAS ID=CAN HEIGHT=400 WIDTH=500> </CANVAS>
<SCRIPT>
 var N1 = document;
 var N0 = N1.getElementById("IN");
 document.writeln(N0);
 var N2 = N1.getElementById("CAN");
 document.writeln(N2);
 var N3 = N2.getContext("2d");
 document.writeln(N3);
 N3.strokeStyle = "black";
 N3.lineWidth = 5;
 N3.font = "28px Verdana";
 var masc = ["purple", "violet", "navy", "blue", "cyan", "green", "yellow", "orange", "orange", "red", "brown"];
 var masa =
 ["#00005F", "#00007F", "#00009F", "#0000BF", "#0000DF", "#0000FF", "#0000DF", "#0000BF", "#00009F", "#00007F", "#00005F"];
 var i = 6.28;
 var j = 0;
 var k = 0;
 var q = 0;
 var y = 0;
 var x = 0;
 var z = 0;
 /* Функция отрисовки кадра*/
 var st = function()
  {
   /* Градиент заливки фона */
   N6 = N3.createLinearGradient(0, 250, 500, 250);
   /* Градиент заливки радуги колесами */
   var N4 = N3.createRadialGradient(220, 945, 600, 220, 1015, 750);
   /* Сдвиг градиента для иммитации движения*/
   k = 10 - j;
   if (k > 9) {k = k - 10;}
   x = j;
   q = 0;
   var y = 0;
   while ( q < 10 )
    {
     x = k;
     if (x > 9) {x = x - 10;}
     N4.addColorStop(y, masc[x]);
     N6.addColorStop(y, masa[x]);
     k = k + 1;
     q = q + 1;
     y = y + 0.1;
    }
   /* Создание фона*/
   N3.rect(0, 0, 500, 400);
   N3.fillStyle = N6;
   N3.fill();
   /* Создание кузова*/
   N3.beginPath();
   N3.moveTo(460, 240);
   N3.lineTo(400, 250);
   N3.arc(355, 240, 40, 0, 3.14, "anticlockwise");
   N3.arc(95, 240, 40, 0, 3.14, "anticlockwise");
   N3.lineTo(40, 240);
   N3.lineTo(20, 200);
   N3.quadraticCurveTo(65, 160, 130, 160);
   N3.quadraticCurveTo(180, 120, 250, 120);
   N3.lineTo(290, 120);
   N3.quadraticCurveTo(370, 120, 390, 160);
   N3.lineTo(465, 160);
   N3.closePath();
   N5 = N3.createLinearGradient(200, 240, 200, 120);
   N5.addColorStop(0, "black");
   N5.addColorStop(1, "gray");
   N3.fillStyle = N5;
   N3.fill();
   /* Создание радуги под колесами*/
   N3.beginPath();
   N3.arc(220, 1015, 750, 0, 3.14, "anticlockwise");
   N3.arc(220, 945, 600, 3.14, 0);
   N3.closePath();
   N3.fillStyle = N4;
   N3.fill();
   /* Поворт колеса*/
   j = j + 1;
   if (j > 10) {j = 0;}
   i = i - 0.3;
   if (i < 0) {i = 6.28;}
   N3.beginPath();
   N3.strokeStyle = "black";
   N3.lineWidth = 10;
   N3.moveTo(95, 240);
   N3.arc(95, 240, 30, 0 + i, 4.71 + i, "anticlockwise");
   N3.moveTo(95, 240);
   N3.arc(95, 240, 30, 4.71 + i, 3.14 + i, "anticlockwise");
   N3.moveTo(95, 240);;
   N3.arc(95, 240, 30, 3.14 + i, 1.57 + i, "anticlockwise");
   N3.moveTo(95, 240);
   N3.arc(95, 240, 30, 1.57 + i, 0 + i, "anticlockwise");
   N3.stroke();
   N3.moveTo(355, 240);
   N3.arc(355, 240, 30, 0 + i, 4.71 + i, "anticlockwise");
   N3.moveTo(355, 240);
   N3.arc(355, 240, 30, 4.71 + i, 3.14 + i, "anticlockwise");
   N3.moveTo(355, 240);
   N3.arc(355, 240, 30, 3.14 + i, 1.57 + i, "anticlockwise");
   N3.moveTo(355, 240);
    N3.arc(355, 240, 30, 1.57 + i, 0 + i, "anticlockwise");
   /* Заливка фона между спицами*/
   N3.fillStyle = N6;
   N3.fill();
   N3.stroke();
  };
 /* Назначение вызова функции отрисовки кадра через каждые 200 миллисекунд*/
 var N = setInterval(st, 200)

</SCRIPT>
Результат:
Для просмотра - наведите мышку.