Специфика Canvas в HTML5 и анимация

Категория: Программирование Обновлено: 02.11.2018 Опубликовано: 02.11.2018 Печать

"Холст" поддерживается следующими версиями браузеров (и выше): Internet Explorer 9, Firefox (версии 9 - 12), Chrome (версии 17 - 18), Safari (версии 5.0 – 5.1), Opera (11.6), iOS Safari 5.0, Opera Mobile 12.0, Android Browser (версии 3.0 – 4.0). Прорисовка реализуется Javascript, соответственно расширяет возможности, например, можно использовать циклы



Вызов функции:

  <script type="application/x-javascript">
    function createImage()
    {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    }
  </script>

Варианты кода:

<body onload="createImage();">
 </body>

<canvas height="200" width="200"></canvas>

<canvas id="canvas" style="border: 2px solid black" width="200" height="200"> </canvas>


Методы и свойства

Очистка некоторой прямоугольной области (добавить в createImage):

ctx.clearRect(50,50,50,50);

Пустой прямоугольник

strokeRect (x,y,w,h), где x и y – координаты верхней левой вершины прямоугольника (по горизонтали и вертикали соответственно); w и h – ширина и высота прямоугольника соответственно.
ctx.strokeRect(20,20,50,50);

окрашенный прямоугольник

fillRect(80, 80, 50, 50);

Цвет линий контура

ctx.strokeStyle = "red";
ctx.strokeStyle = "#FF0000";
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeStyle = "rgba(255, 0, 0, 1)";

Цвет заливки

fillStyle

Толщина линий в пикселях

ctx.lineWidth = 20;

Перо

moveTo(x,y), изначально (0,0)
ctxCanvas.moveTo(10, 30)

Прямые линии

lineTo(x,y)
  ctx.beginPath();
  ctx.moveTo(0,100);
  ctx.lineTo(100,0);
  ctx.lineTo(200,100);
  ctx.stroke();

Дуги

arc(x, y, r, sА, eА, a), где x и y - центр окружности; r - радиус окружности; sA - начальный угол; eA - конечный угол; а - направление.
ctx.arc(100, 100, 75, 1.2*Math.PI, 1.8 * Math.PI, false);

Кривые

quadraticCurveTo (Px, Py, x, y)
bezierCurveTo (P1x, P1y, P2x, P2y, x, y), где x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой
ctx.bezierCurveTo(75, 55, 175, 20, 250, 15);
ctx.quadraticCurveTo(100, 100, 250, 15);

Форма начальных и конечных точек линий

lineCap, где "butt" — начальная и конечная точки как таковые отсутствуют (значение по умолчанию); "round" — начальная и конечная точки имеют вид кружков; "square" — начальная и конечная точки имеют вид квадратиков.
ctx.lineCap = "butt";

Форма точек соединения линий друг с другом

lineJoin, где "miter" — точки соединения имеют вид острого или тупого угла (значение по умолчанию); "round" — точки соединения, образующие острые углы, скругляются; "bevel" — острые углы, образуемые соединяющимися линиями, как бы срезаются.

Вывод текста в указанное место

strokeText(<выводимый текст>, x, y, w), где x - горизонтальная координата; y - вертикальная координата: w - максимальная ширина.

Стиль текста

ctx.fillStyle = "yellow";
ctx.font = "italic 12pt Verdana";
ctx.fillText("test text", 50, 100);

Выравнивание текста

textAlign, где "left" — выравнивание по левому краю; "right" — выравнивание по правому краю; "start" — выравнивание по левому краю, если текст выводится по направлению слева направо, и по правому краю в противном случае (значение по умолчанию); "end" — выравнивание по правому краю, если текст выводится по направлению слева направо, и по левому краю в противном случае; "center" — выравнивание по центру.
textBaseline, где "top" — выравнивание по верху прописных (больших) букв; "hanging" — выравнивание по верху строчных (маленьких) букв; "middle" — выравнивание посередине строчных букв; "alphabetic" — выравнивание по базовой линии букв европейских алфавитов (значение по умолчанию); "ideographic" — выравнивание по базовой линии иероглифических символов (она находится чуть ниже базовой линии букв европейских алфавитов); "bottom" — выравнивание по низу букв.

Значение прозрачности

globalAppha

Масштабирование изображения

drawImagе(i, x, y, w, h), где i – объект JavaScript Image; x – начальная координата (по-горизонтали) для отрисовки изображения; y – начальная координата (по-вертикали) для отрисовки изображения; w – ширина изображения на холсте; h – высота изображения на холсте

Обрезка изображения

drawImage(i, srcx, srcy, srcw, srch, x, y, w, h), где i – объект JavaScript Image; srcx – координата (по-горизонтали) верхнего левого угла вырезаемого изображения, относительно исходного;  srcy – координата (по-вертикали) верхнего левого угла вырезаемого изображения, относительно исходного; srcw – ширина вырезаемого изображения; srch – высота вырезаемого изображения; x – начальная координата (по-горизинтали) для отрисовки изображения на холсте; y – начальная координата (по-вертикали) для отрисовки изображения на холсте; w – ширина изображения на холсте; h – высота изображения на холсте.


Примеры

Отрисовка двух квадратов:

function createImage()
    {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeRect(20,20,50,50);
    ctx.fillRect(80, 80, 50, 50);
     }

Прямоугольники в цвете:

function createImage()
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.strokeStyle = "red";
  ctx.strokeRect(20,20,50,50);
  ctx.fillStyle = "blue";
  ctx.fillRect(80, 80, 50, 50);
  ctx.clearRect(50,50,50,50);
   }

Отрисовка линий:

function createImage()
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(0,100);
  ctx.lineTo(100,0);
  ctx.lineTo(200,100);
  ctx.lineTo(150,200);
  ctx.lineTo(50,200);
  ctx.lineTo(0,100);
  ctx.stroke();
   }

Дуга:

function createImage()
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 75, 1.2*Math.PI, 1.8 * Math.PI, false);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "black";
  ctx.stroke();
   }

Кривые Безье:

quadraticCurveTo (Px, Py, x, y)
bezierCurveTo (P1x, P1y, P2x, P2y, x, y)

function createImage()
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(10, 15);
  ctx.bezierCurveTo(75, 55, 175, 20, 250, 15);
  ctx.moveTo(10, 15);
  ctx.quadraticCurveTo(100, 100, 250, 15);
  ctx.stroke();
   }

Стили линий

function createImage()
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.lineWidth = 10;
  ctx.lineCap = "butt";
  ctx.moveTo(20, 20);
  ctx.lineTo(180, 20);
  ctx.stroke();
  ctx.beginPath();
  ctx.lineCap = "round";
  ctx.moveTo(20, 40);
  ctx.lineTo(180, 40);
  ctx.stroke();
  ctx.beginPath();
  ctx.lineCap = "square";
  ctx.moveTo(20, 60);
  ctx.lineTo(180, 60);
  ctx.stroke();
  }

Залитый и пустой треугольник

function draw(){
  var canvas = document.getElementById('lesson6');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(20,20); // задаем начальную точку для "пера"
  ctx.lineTo(20, 120); // сторона А
  ctx.lineTo(120,120); // сторона B
  ctx.lineTo(20,20); // сторона С
  ctx.stroke(); // рисуем незаполненную фигуру
 
  ctx.beginPath();
  ctx.moveTo(40,20); // задаем начальную точку для отрисовки второго треугольника
  ctx.lineTo(140, 20); // сторона D
  ctx.lineTo(140,120); // сторона E
  ctx.lineTo(40,20); // сторона F
  ctx.fill(); // рисуем залитую цветом фигуру
   }

Смайлик

function draw(){
  var canvas = document.getElementById('lesson6');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(65,65); // начальная позиция для рисование
  ctx.arc(60,65,5,0,Math.PI*2,true); // дуга А
  ctx.moveTo(95,65); // перенос "пера" в позицию для отрисовки дуги B
  ctx.arc(90,65,5,0,Math.PI*2,true); // дуга B
  ctx.moveTo(110,75); // перенос "пера" для отрисовки дуги C
  ctx.arc(75,75,35,0,Math.PI,false); // дуга C
  ctx.moveTo(125,75); // перенос "пера" для отрисовки дуги D
  ctx.arc(75,75,50,0,Math.PI*2,true); // дуга D
  ctx.stroke(); // отрисовка незаполненной фигуры

Произвольная фигура

function draw(){
  var canvas = document.getElementById('lesson6');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(75,25); // задание начальных координат
  ctx.quadraticCurveTo(25,25,25,62.5); // кривая А
  ctx.quadraticCurveTo(25,100,50,100); // кривая B
  ctx.quadraticCurveTo(50,120,30,125); // кривая C
  ctx.quadraticCurveTo(60,120,65,100); // кривая D
  ctx.quadraticCurveTo(125,100,125,62.5); // кривая E
  ctx.quadraticCurveTo(125,25,75,25); // кривая F
  ctx.stroke(); // отрисовка незаполненной фигуры

Залитый бордовый прямоугольник

function createImage()
    {
      var canvas = document.getElementById("lesson6");
      var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(100,0,0)"
        ctx.fillRect (20, 10, 50, 70);
     }

Циклы зарисовки залитых и пустых прямоугольников

function createImage()
    {
    var ctx = document.getElementById('lesson9').getContext('2d');
    var colors = ["red","orange","yellow","green","lightblue","blue","violet"];
    for (i=0; i<7; i++)
    {
      ctx.fillStyle=colors[i];
      ctx.fillRect(20*i,20,20,200);
    }
    }

Вывод изображения на холст

function createImage()
  {
  var ctx = document.getElementById('lesson8').getContext('2d');
  var img = new Image(); // создание нового изображения
  img.src = 'img.bmp'; // путь к источнику для img
  img.onload = function() // объявление функции, котороя будет вызываться при загрузке img
  {
   ctx.drawImage(img,0,0); // вызов метода отрисовки изображения на холсте
  }

Циклы вывода масштабированных изображений на холсте (заливкой-фоном)

function createImage()
  {
  var ctx = document.getElementById('lesson8').getContext('2d');
  var img = new Image(); // создание нового изображения
  img.src = 'img.bmp'; // путь к источнику для img
  img.onload = function() // функция, вызываемая при загрузке img
  {
  for (h=0;h<3;h++)    /* цикл для задания координат (по-вертикали) для изображения */
  {
    for (w=0;w<5;w++) /* цикл для задания координат (по-горизонтали) для изображения */
    {
     ctx.drawImage(img,w*200,h*160,200,160); /* вызов метода для отрисовки изображения на холсте
      с переменными начальными координатами */
    }
   }
  }

Вырезка части изображения и размещение его на холсте:

function createImage()
  {
  var ctx = document.getElementById('lesson8').getContext('2d');
  var img = new Image(); // создание нового изображения
  img.src = 'img.bmp'; // путь к источнику для img
  img.onload = function() // функция, вызываемая при загрузке img
  {
    ctx.drawImage(img,300,250,100,250,0,0,100,250); /* вызов метода для вырезания части изображения
     и отрисовки его на холсте */
  }

Анимация горизонтальное перемещение квадрата (с clearRect)

function createImage()
 {
 var ctx = document.getElementById('lesson10').getContext('2d');
 var x = 0;
 function animation()
 {
  ctx.clearRect(0,0, 1000, 1000);
  ctx.fillRect(x, 10, 10, 10);
  x = x+1;
  if (x > 999) { x = 0;}
  setTimeout(animation, 50);
 }
 animation();

Анимация "графики" (без clearRect)

function createImage()
  {
  var ctx = document.getElementById('lesson10').getContext('2d');
  var x = 0;
  function animation()
  {
    ctx.fillStyle="blue";
    ctx.fillRect(x*100, (Math.sin(x)*100)+100, 3, 3);
    ctx.fillStyle="red";
    ctx.fillRect(x*100, (Math.cos(x)*100)+100, 3, 3);
    x = x+0.05;
    setTimeout(animation, 50);
  }
  animation();

Для сайтов находящихся на тарифном обслуживании и администрировании работы проводятся без дополнительной оплаты, входят в стоимость тарифа

По всем вопросам обращаться по адресу: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. или по телефону (WhatsApp): +7-994-009-32-20


Поделиться страницей в социальных сетях:

Просмотров: 416

Добавить комментарий

Защитный код
Обновить