html5-canvas учебник
Начало работы с html5-canvas

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG

Как добавить элемент холста Html5 на веб-страницу

Html5-Canvas ...

Является элементом Html5.
Поддерживается в большинстве современных браузеров (Internet Explorer 9+).
Является видимым элементом, который по умолчанию прозрачен
Имеет ширину по умолчанию 300 пикселей и высоту по умолчанию 150 пикселей.
Требуется JavaScript, потому что все содержимое должно быть программно добавлено в Canvas.

Пример. Создайте элемент Html5-Canvas, используя разметку Html5 и JavaScript:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvasHtml5{border:1px solid red; }
    #canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // add a canvas element using javascript
    var canvas=document.createElement('canvas');
    canvas.id='canvasJavascript'
    document.body.appendChild(canvas);

}); // end $(function(){});
</script>
</head>
<body>

    <!-- add a canvas element using html -->
    <canvas id='canvasHtml5'></canvas>

</body>
</html>

Размер и разрешение холста

Размер холста - это область, которую он занимает на странице, и определяется свойствами ширины и высоты CSS.

canvas {
   width : 1000px;
   height : 1000px;
}

Разрешение холста определяет количество содержащихся в нем пикселей. Разрешение задается установкой свойств ширины и высоты элемента холста. Если не указано, размер по умолчанию составляет 300 на 150 пикселей.

Следующий холст будет использовать указанный выше размер CSS, но поскольку width и height не указаны, разрешение будет 300 на 150.

<canvas id="my-canvas"></canvas>

Это приведет к тому, что каждый пиксель будет растягиваться неравномерно. Аспект пикселя равен 1: 2. Когда холст растянут, браузер будет использовать билинейную фильтрацию. Это приводит к размыванию пикселей, которые растянуты.

Для достижения наилучших результатов при использовании холста убедитесь, что разрешение холста соответствует размеру экрана.

Следуя приведенному выше стилю CSS, чтобы соответствовать размеру экрана, добавьте холст с width и height установленной на тот же подсчет пикселей, что и стиль.

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>

Прозрачный холст

Много раз при работе с холстом вам нужно иметь холст, чтобы хранить некоторые данные пикселя intrum. Легко создать экранный холст, получить 2D-контекст. Внеэкранный холст также будет использовать доступное графическое оборудование для рендеринга.

Следующий код просто создает холст и заполняет его синими пикселями.

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

Много раз экранный холст будет использоваться для многих задач, и у вас может быть много холстов. Чтобы упростить использование холста, вы можете прикрепить контур canvas к холсту.

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);

Обнаружение положения мыши на холсте

В этом примере показано, как получить положение мыши относительно холста, так что (0,0) будет верхним левым углом холста HTML5. e.clientX и e.clientY будут получать позиции мыши относительно верхней части документа, чтобы изменить это, чтобы основываться на верхней части холста мы вычитаем left и right положение холста от клиентов X и Y.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});

Бегущий пример

Использование Math.round должно гарантировать x,y позиции x,y являются целыми числами, поскольку ограничивающий прямоугольник холста может не иметь целочисленных позиций.

Привет, мир

HTML

<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);

Результат

Индекс для возможностей холста Html5 Canvas & Uses

Возможности холста

Canvas позволяет программно рисовать на вашей веб-странице:

Картины холста могут быть широко оформлены:

Использование холста

Чертежи можно комбинировать и размещать в любом месте на холсте, чтобы его можно было использовать для создания:

Приложения Paint / Sketch,
Быстрые интерактивные игры,
Анализ данных, как диаграммы, графики,
Photoshop-подобный образ,
Flash-реклама и Flashy-контент.

Canvas позволяет вам манипулировать красками, зелеными, синими и альфа-компонентами цветов. Это позволяет холсту манипулировать изображениями с результатами, подобными Photoshop.

Перекрашивайте любую часть изображения на уровне пикселей (если вы используете HSL, вы можете даже перекрасить изображение, сохраняя при этом важное освещение и насыщенность, чтобы результат не выглядел так, как будто кто-то ударил краской на изображении),
«Нокаут» фон вокруг человека / предмета в изображении,
Обнаружить и налить часть изображения (например, изменить цвет лепестка с щелчком мыши с зеленого на желтый - только этот щелклый лепесток!),
Сделайте Перспективное деформирование (например, оберните изображение вокруг кривой чашки),
Изучите изображение для контента (например, распознавание лица),
Ответьте на вопросы об изображении: есть ли автомобиль, припаркованный в этом изображении моего места для парковки ?,
Применение стандартных фильтров изображений (оттенки серого, сепия и т. Д.)
Примените любой фильтр экзотических изображений, который вы можете придумать (Sobel Edge Detection),
Объедините изображения. Если бы дорогая бабушка Сью не могла дойти до воссоединения семьи, просто «фотошоп» ее в образ воссоединения. Не нравится кузен Фил - просто «фотошоп его,
Воспроизведение видео / захват кадра из видео,
Экспортируйте содержимое холста как .jpg | .png (вы даже можете обрезать или аннотировать изображение и экспортировать результат в виде нового изображения),

О перемещении и редактировании рисунков холста (например, для создания игровой игры):

После того, как что-то было нарисовано на холсте, этот существующий чертеж не может быть перемещен или отредактирован. Это распространенное заблуждение о том, что холст-чертежи являются подвижными, заслуживает уточнения: существующие рисунки холста не могут быть отредактированы или перемещены!
Холст рисует очень, очень быстро. Холст может рисовать сотни изображений, текстов, линий и кривых за долю секунды. Он использует графический процессор, если он доступен для ускорения рисования.
Холст создает иллюзию движения, быстро и многократно рисуя что-то, а затем перерисовывая его в новом положении. Подобно телевидению, эта постоянная перерисовка дает зрителям иллюзию движения.

Поворот

Метод rotate(r) 2D-контекста поворачивает холст на указанное количество r радианов вокруг начала координат.

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>

<button type="button" onclick="rotate_ctx();">Rotate context</button>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);

rotate_ctx = function() {
  // translate so that the origin is now (ox, oy) the center of the canvas
  ctx.translate(ox, oy);
  // convert degrees to radians with radians = (Math.PI/180)*degrees. 
  ctx.rotate((Math.PI / 180) * 15);
  ctx.fillText("Hello World", 0, 0);
  // translate back
  ctx.translate(-ox, -oy);
};

Живая демонстрация на JSfiddle

Сохранить файл canvas в файл

Вы можете сохранить холст в файл изображения с помощью метода canvas.toDataURL() , который возвращает URI данных для данных изображения холста.

Метод может принимать два необязательных параметра canvas.toDataURL(type, encoderOptions) : type - это формат изображения (если не указано значение по умолчанию - image/png ); encoderOptions - это число от 0 до 1, указывающее качество изображения (по умолчанию - 0,92).

Здесь мы рисуем холст и прикрепляем URI данных холста к ссылке «Загрузить в myImage.jpg».

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

Живой демо на JSfiddle.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow