js:canvas:cheat []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== HTML5 Canvas Шпаргалка ======

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

===== HTML5 Canvas Element=====

==== Html5 canvas element ====
<code javascript>
    <canvas id="myCanvas" width="500" height="300">
</code>

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

<code javascript>
    <canvas id="myCanvas" width="500" height="300">
        your browser doesn't support canvas!
    </canvas>
</code>

==== 2d context ====

<code javascript>
    var context = canvas.getContext('2d');
</code>

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

<code javascript>
    var context = canvas.getContext('webgl');
</code>


===== Фигуры =====

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

<code javascript>
    context.rect(x, y, width, height);
    context.fill();
    context.stroke();
</code>

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

<code javascript>
    context.fillRect(x, y, width, height);
</code>

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

<code javascript>
    context.strokeRect(x, y, width, height);
</code>

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

<code javascript>
    context.arc(x, y, radius, 0, Math.PI * 2);
    context.fill();
    context.stroke();
</code>


===== Стили =====

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

<code javascript>
    context.fillStyle = 'red';
    context.fill();
</code>

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

<code javascript>
    context.strokeStyle = 'red';
    context.stroke();
</code>

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

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

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

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

==== Pattern ====

<code javascript>
    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';
</code>

==== Соединение лини ====

context.lineJoin — свойство контекста 2D, которое определяет, как рисуется точка соединения двух линий. 1

**Оно может принимать следующие значения:**

  * miter — прямые соединения, которые образуют прямые углы (значение по умолчанию); 2
  * round — закруглённые соединения; 2
  * bevel — конические соединения. 2
  * Синтаксис: context.lineJoin = 'miter', 'round' или 'bevel'.

**Пример кода для установки разных значений:**

  * context.lineJoin = "miter" — рисуется треугольный угол соединения линий;
  * context.lineJoin = "bevel" — рисуется плоский (линейный) угол соединения линий;
  * context.lineJoin = "round" — рисуется круглый угол соединения линий.

<code javascript>
    context.lineJoin = 'miter|round|bevel';
</code>

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

==== Shadow ====
<code javascript>
    context.shadowColor = 'black';
    context.shadowBlur = 20;
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
</code>

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

<code javascript>
    context.globalAlpha = 0.5; // between 0 and 1
</code>


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

==== Строка ====

<code javascript>
    context.fillStyle = 'red';
</code>

==== Hex Long ====

<code javascript>
    context.fillStyle = '#ff0000';
</code>

==== Hex Short ====

<code javascript>
    context.fillStyle = '#f00';
</code>

==== RGB ====

<code javascript>
    context.fillStyle = 'rgb(255,0,0)';
</code>

==== RGBA ====

<code javascript>
    context.fillStyle = 'rgba(255,0,0,1)';
</code>


===== Paths =====

==== Begin Path ====

<code javascript>
    context.beginPath();
</code>

==== Line ====

<code javascript>
    context.lineTo(x, y);
</code>

==== Arc ====

<code javascript>
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
</code>

==== Quadratic curve ====

<code javascript>
    context.quadraticCurveTo(cx, cy, x, y);
</code>

==== Bezier curve ====

<code javascript>
    context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
</code>

==== Close Path ====

<code javascript>
    context.closePath();
</code>


===== Images =====

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

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

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

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

==== Crop image ====

<code javascript>
    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';
</code>


===== Text =====

==== Fill Text ====

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

==== Stroke Text ====

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

==== Bold Text ====

<code javascript>
    context.font = 'bold 40px Arial';
</code>

==== Italic Text ====

<code javascript>
    context.font = 'italic 40px Arial';
</code>

==== Text Align ====

<code javascript>
    context.textAlign = 'start|end|left|center|right';
</code>

==== Text Baseline ====<code javascript>
    context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
    |bottom';
</code>

==== Get Text Width ====<code javascript>
    var width = context.measureText('Hello world').width;
</code>


===== Transforms =====

==== Translate ====

<code javascript>
    context.translate(x, y);
</code>

==== Scale ====

<code javascript>
    context.scale(x, y);
</code>

==== Rotate ====

<code javascript>
    context.rotate(radians);
</code>

==== Flip Horizontally ====

<code javascript>
    context.scale(-1, 1);
</code>

==== Flip Vertically ====

<code javascript>
    context.scale(1, -1);
</code>

==== Custom Transform ====

<code javascript>
    context.transform(a, b, c, d ,e, f);
</code>

==== Set Transform ====

<code javascript>
    context.setTransform(a, b, c, d ,e, f);
</code>

==== Shear ====

<code javascript>
    context.transform(1, sy, sx, 1, 0, 0);
</code>

==== Reset ====

<code javascript>
    context.setTransform(1, 0, 0, 1, 0, 0);
</code>


===== State Stack =====

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

<code javascript>
    context.save();
</code>

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

<code javascript>
    context.restore();
</code>


===== Clipping =====

==== Clip ====

<code javascript>
    // draw path here
    context.clip();
</code>


===== Image Data =====

==== Get Image Data ====

<code javascript>
    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
</code>

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

<code javascript>
    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 <len; i += 4) {
    red = data[i];
    green = data[i + 1];
    blue = data[i + 2];
    alpha = data[i + 3];
}
</code>

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

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

    for(y = 0; y <imageHeight; y++) {
    for(x = 0; x <imageWidth; x++) {
    red = data[((imageWidth * y) + x) * 4];
    green = data[((imageWidth * y) + x) * 4 + 1];
    blue = data[((imageWidth * y) + x) * 4 + 2];
    alpha = data[((imageWidth * y) + x) * 4 + 3];
}
}
</code>

==== Set Image Data ====

<code javascript>
    context.putImageData(imageData, x, y);
</code>
Инструменты пользователя

Инструменты сайта

Инструменты страницы
