====== HTML5 Canvas Шпаргалка ====== В этой шпаргалке кратко описан полный HTML5 Canvas API для 2D-контекста, основанный на спецификации W3C HTML5 Canvas. В нем также представлены методы обработки общих процедур. ===== HTML5 Canvas Element===== ==== Html5 canvas element ====

==== Html5 canvas element with fallback content ====

==== 2d context ====


    var context = canvas.getContext('2d');

==== Webgl context (3d) ====


    var context = canvas.getContext('webgl');

===== Фигуры ===== ==== Прямоугольник ====


    context.rect(x, y, width, height);
    context.fill();
    context.stroke();

==== Сокращенный вывод, заполненного треугольника ====


    context.fillRect(x, y, width, height);

==== Сокращенный вывод, не заполненного треугольника ====


    context.strokeRect(x, y, width, height);

==== Круг ====


    context.arc(x, y, radius, 0, Math.PI * 2);
    context.fill();
    context.stroke();

===== Стили ===== ==== Заполнение ====


    context.fillStyle = 'red';
    context.fill();

==== Контур ====


    context.strokeStyle = 'red';
    context.stroke();

==== Линейный градиент ====


    var grd = context.createLinearGradient(x1, y1, x2, y2);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'blue');
    context.fillStyle = grd;
    context.fill();

==== Радиальный градиент ====


    var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'blue');
    context.fillStyle = grd;
    context.fill();

==== Pattern ====


    var imageObj = new Image();
    imageObj.onload = function() {
    var pattern = context.createPattern(imageObj, 'repeat');
    context.fillStyle = pattern;
    context.fill();
};
    imageObj.src = 'path/to/my/image.jpg';

==== Соединение лини ==== context.lineJoin — свойство контекста 2D, которое определяет, как рисуется точка соединения двух линий. 1 **Оно может принимать следующие значения:** * miter — прямые соединения, которые образуют прямые углы (значение по умолчанию); 2 * round — закруглённые соединения; 2 * bevel — конические соединения. 2 * Синтаксис: context.lineJoin = 'miter', 'round' или 'bevel'. **Пример кода для установки разных значений:** * context.lineJoin = "miter" — рисуется треугольный угол соединения линий; * context.lineJoin = "bevel" — рисуется плоский (линейный) угол соединения линий; * context.lineJoin = "round" — рисуется круглый угол соединения линий.


    context.lineJoin = 'miter|round|bevel';

==== Line Cap (стиль конца отрезка лини) ==== * butt (значение по умолчанию) — у линии будут плоские концы; 5 * round — у линии будут закруглённые концы, радиус закругления равен половине ширины линии; 1 * square — у линии будут квадратные концы.


    context.lineCap = 'butt|round|square';

==== Shadow ====


    context.shadowColor = 'black';
    context.shadowBlur = 20;
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;

==== Alpha (Opacity - Непрозрачность) ====


    context.globalAlpha = 0.5; // between 0 and 1

===== Цветовые форматы ===== ==== Строка ====


    context.fillStyle = 'red';

==== Hex Long ====


    context.fillStyle = '#ff0000';

==== Hex Short ====


    context.fillStyle = '#f00';

==== RGB ====


    context.fillStyle = 'rgb(255,0,0)';

==== RGBA ====


    context.fillStyle = 'rgba(255,0,0,1)';

===== Paths ===== ==== Begin Path ====


    context.beginPath();

==== Line ====


    context.lineTo(x, y);

==== Arc ====


    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

==== Quadratic curve ====


    context.quadraticCurveTo(cx, cy, x, y);

==== Bezier curve ====


    context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);

==== Close Path ====


    context.closePath();

===== Images ===== ==== Draw Image with default size ====


    var imageObj = new Image();
    imageObj.onload = function() {
    context.drawImage(imageObj, x, y);
};
    imageObj.src = 'path/to/my/image.jpg';

==== Draw image and set size ====


    var imageObj = new Image();
    imageObj.onload = function() {
    context.drawImage(imageObj, x, y, width, height);
};
    imageObj.src = 'path/to/my/image.jpg';

==== Crop image ====


    var imageObj = new Image();
    imageObj.onload = function() {
    context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
};
    imageObj.src = 'path/to/my/image.jpg';

===== Text ===== ==== Fill Text ====


    context.font = '40px Arial';
    context.fillStyle = 'red';
    context.fillText('Hello World!', x, y);

==== Stroke Text ====


    context.font = '40pt Arial';
    context.strokeStyle = 'red';
    context.strokeText('Hello World!', x, y);

==== Bold Text ====


    context.font = 'bold 40px Arial';

==== Italic Text ====


    context.font = 'italic 40px Arial';

==== Text Align ====


    context.textAlign = 'start|end|left|center|right';

==== Text Baseline ====


    context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
    |bottom';

==== Get Text Width ====


    var width = context.measureText('Hello world').width;

===== Transforms ===== ==== Translate ====


    context.translate(x, y);

==== Scale ====


    context.scale(x, y);

==== Rotate ====


    context.rotate(radians);

==== Flip Horizontally ====


    context.scale(-1, 1);

==== Flip Vertically ====


    context.scale(1, -1);

==== Custom Transform ====


    context.transform(a, b, c, d ,e, f);

==== Set Transform ====


    context.setTransform(a, b, c, d ,e, f);

==== Shear ====


    context.transform(1, sy, sx, 1, 0, 0);

==== Reset ====


    context.setTransform(1, 0, 0, 1, 0, 0);

===== State Stack ===== ==== Push State onto Stack ====


    context.save();

==== Pop State off of Stack ====


    context.restore();

===== Clipping ===== ==== Clip ====


    // draw path here
    context.clip();

===== Image Data ===== ==== Get Image Data ====


    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;

==== Loop Through Image Pixels ====


    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
    var len = data.length;
    var i, red, green, blue, alpha;

    for(i = 0; i 

==== Loop Through Image Pixels With Coordinates ====


    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
    var x, y, red, green, blue, alpha;

    for(y = 0; y 

==== Set Image Data ====


    context.putImageData(imageData, x, y);