Делаем "векторную" графику на Javascript

В том смысле, что канва будет менять размер вместе с окном браузера, а картинка перерисовываться после изменения размеров канвы. При этом размеры картинки должны зависеть от размеров канвы. У нас картинка будет состоять из единственной закрашенной окружности, но подход нетрудно расширить и на большее количество объектов.

Итак, в документе есть канва, размер которой не указан атрибутами тега <canvas>:

<canvas id="dynamicCanvas" style="background-color:black;"></canvas>

Этот размер будет установлен яваскриптом, расположенным ниже в документе:

<script type="text/javascript">
(function() {
 var canvas = document.getElementById('dynamicCanvas');
 var ctx = canvas.getContext('2d');
 var width = canvas.width = document.documentElement.clientWidth; //клиентская ширина окна
 var height = canvas.height = window.innerHeight; //а высота - из высоты окна
 //
 // здесь будет остальной код скрипта
 //
})();
</script>
<noscript>Нужен включённый Javascript для работы приложения</noscript>

Высота взята из объекта window, чтобы канва не оказалось маленькой высоты, если страница не наполнена содержимым.

Затем поставим слушатель события resize, который будет менять размеры канвы и вызывать функцию перерисовки через нужное количество миллисекунд, например, 100:

window.addEventListener('resize', resize);
function resize() {
 width = canvas.width = document.documentElement.clientWidth;
 height = canvas.height = window.innerHeight;
 timerId = setTimeout(redraw, 100);
}

Функция перерисовки делает то, что мы там запрограммировали, в данном случае - рисует круг-"солнышко":

var timerId;

function redraw() {
 var width = canvas.width = document.documentElement.clientWidth;
 var height = canvas.height = window.innerHeight;
 var cx = Math.floor (width/2);
 var cy = Math.floor (height/2);
 var size = Math.floor(Math.min(width,height)/2-10);
 ctx.save();
 ctx.beginPath();
 ctx.arc (cx, cy, size, 0, Math.PI*2, true);
 ctx.fillStyle = '#ffb41f';
 ctx.fill ();
 ctx.lineWidth = 5;
 ctx.strokeStyle = 'yellow';
 ctx.stroke();
 ctx.closePath();
 ctx.restore();
 clearTimeout (timerId);
}

Посмотреть, как работает всё вместе можно, открыв в новом окне (вкладке) скрипт по ссылке и меняя размеры окна.

 Скрипт в работе (новое окно/вкладка)

 CanvasDynamicSize.html, файл приложения (1 Кб)

Полный исходный текст можно увидеть, нажав на свободном белом крае страницы правую кнопку мыши и выбрав пункт меню "Исходный код страницы", "Просмотр HTML-кода" и т.п. (название пункта зависит от браузера).

06.12.2017, 14:11 [2087 просмотров]