БлогNot. Абсолютно чёрное полотно без возможности увидеть исходник страницы :)

Абсолютно чёрное полотно без возможности увидеть исходник страницы :)

В принципе, всё это есть в исходнике клякс, но пусть будет ещё отдельным кодом.

Цель - JS-приложение, которое займёт всё место в окне браузера (за счёт настроек стиля), позволит сохранить себя только как рисунок (поскольку на весь экран растянут элемент canvas) и сбросит канву при изменении размеров окна браузера. А поскольку канва будет занимать всё свободное место, по щелчку правой кнопкой будет доступна команда "Сохранить рисунок как...", но не "Исходный код страницы".

Вот примерно как должен выглядеть полный исходник такого примера (файл .html в кодировке Юникода utf-8).

<!doctype html>
<html lang="ru">
<head>
 <meta charset="utf-8">
 <title>Чёрное полотно на весь экран</title>
 <style> 
  body { 
   margin: 0; padding: 0; background-color: #000; color: #eee; 
  }
  html, body { 
   width: 100%; height: 100%; 
  }
  #canvas { 
   display: block; 
  }
 </style> 
</head>
<body>
 <canvas id="canvas"></canvas>
 <script>
 var canvas = document.getElementById('canvas'); //Получить Id канвы
 var ctx = canvas.getContext('2d'); //Получить графический контекст

 canvas.onmouseup = function (e) { //Рисование по клику - здесь!
  ctx.fillStyle = '#ff0000'; ctx.beginPath(); 
  ctx.arc(e.clientX,e.clientY,10,Math.PI*2,false);
  ctx.fill();
 }

 function resizeCanvas() { //Изменить размеры канвы по размерам окна
  canvas.width = window.innerWidth; 
  canvas.height = window.innerHeight;
 }

 window.addEventListener ('resize',resizeCanvas,false); //На изменение размеров окна
 window.addEventListener ('load',function (e) { //На загрузку страницы
  resizeCanvas(); 
 }, false);
 </script>
</body>
</html>

Красные кружочки по клику рисуются просто так, можно изменить наполнение функции canvas.onmouseup.

02.10.2019, 12:23 [1050 просмотров]


теги: javascript графика

К этой статье пока нет комментариев, Ваш будет первым