БлогNot. Javascript: рисуем цветные кружочки движением мыши (для самых маленьких)

Javascript: рисуем цветные кружочки движением мыши (для самых маленьких)

Просто двигать мышкой по странице. Движение быстрее - кружки больше и реже, медленнее - меньше и гуще :). Цвета случайные. Любой клик мышкой стирает всё. Детям нравится :)

Исходник страницы, который прилагается ниже, содержит пример кода для такой полезной вещи, как рисование в теге <canvas>, появившемся в HTML5. Заодно показано, как сделать область для рисования во весь экран.

Ограничения по браузерам видны в исходнике внизу. Предполагается, что исходник будет размещён в Юникоде (UTF-8).

 canvas_circles_1.html (4 Кб)

 Рисуем кружки на экране движением мыши

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Детская онлайн-рисовалка</title>

<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<script type="text/javascript">

window.onload = function() { //функция на загрузку документа

 var DELAY = 20; //задержка в мс
 var MIN_RADIUS = 2;   //минимальный радиус окружности в пикселах
 var MAX_RADIUS = 100; //максимальный радиус окружности в пикселах

 var canvas = document.getElementById("canvas"); //канва
 var context = canvas.getContext("2d"); //контекст
 var cx = null, cy = null; //текущая точка
 var px = null, py = null; //предыдущая точка

 function check() { //отрисовка раз в DELAY мииллисекунд
  if (cx == null || cy == null) return;
  if (px == null || py == null) {  px = cx; py = cy; return;  }
  var dx = cx - px, dy = cy - py;
  if (dx>-1 && dx<1 && dy>-1 && dy<1) return;
  //расчёты:
  var base_radius = Math.sqrt (dx * dx + dy * dy);
  var delta_radius = base_radius * Math.random();
  var actual_radius = base_radius * Math.random();
  if (actual_radius<0) actual_radius=0;
  else if (actual_radius>MAX_RADIUS) actual_radius=MAX_RADIUS;
  var angle = Math.PI * 2 * Math.random();
  //отрисовка:
  context.beginPath();
  context.arc(
   cx + delta_radius * Math.cos(angle), //центр по x
   cy + delta_radius * Math.sin(angle), //центр по y
   MIN_RADIUS + actual_radius,          //радиус
   0,                                   //начальный угол
   Math.PI * 2,                         //конечный угол
   true                                 //против часовой стрелки
  );
  context.closePath();
  //заливка:
  context.fillStyle = 'hsl(' + Math.round(Math.random()*360) + ', 100%, 50%)';
   //параметры: оттенок 0-360 градусов (Hue), насыщенность 0%-100% (Saturation), светимость 0-100% (Lightness)
   //осторожно, не все комбинации - рабочие!
   //http://www.w3.org/TR/css3-color/#hsl-color
  context.fill();
  px = cx;
  py = cy;
 }
 setInterval(check, DELAY);

 //события мыши для объекта canvas:
 canvas.onmousedown = function (e) { //на нажатие кнопки мыши - перерисовать
  setup();
 }

 canvas.onmousemove = function (e) { //на движение мыши - запоминаем новые координаты
  cx = e.clientX;
  cy = e.clientY;
  e.preventDefault(); //отмена стандартного действия браузера
  return false;
 }

 canvas.oncontextmenu = function(e) { //вызов контекстного меню
  e.preventDefault(); //отменяем вызов меню правой кнопкой
  return false;
 }

 //добавка для тачпадов:
 canvas.ontouchend = canvas.onmouseup = canvas.onmouseout = function(e) { 
  cx = cy = px = py = null;
 }

 canvas.ontouchstart = canvas.ontouchmove = function(e) {
  if (e.touches.length == 1) { //один палец
   var t = e.touches[0];
   cx = t.clientX;
   cy = t.clientY;
  }
  else if (e.touches.length > 2) {
   setup();
  }
  e.preventDefault();
  return false;
 }

 //начальная отрисовка:
 function setup() {
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  canvas.width = w;
  canvas.height = h;
  context.fillStyle = '#000000';
  context.fillRect(0, 0, w, h);
 }

 window.onresize = setup;
 setup();
};

</script>
</head>

<body style="margin: 0; overflow: hidden;">

<canvas id="canvas" style="border: 0px">
<p>Похоже, ваш браузер не поддерживает HTML5 и тег &lt;canvasas&gt;.</p>
<p>Попробуйте использовать один из следующих браузеров:</p>
<ul>
 <li>Chrome (&gt;4.0)</li>
 <li>Opera (&gt;9.0)</li>
 <li>Opera Mobile (&gt;10.0)</li>
 <li>Firefox (&gt;2.0)</li>
 <li>Safari (&gt;3.1)</li>
 <li>iOS Safari (&gt;3.2)</li>
 <li>Android Browser (&gt;2.1)</li>
 <li>Internet Explorer (<b>&gt;=9.0</b> - для самых маленьких)</li>
</ul>
</canvas>

</body></html>

 Сайт Алексея Мичурина - полезные онлайн-инструменты

06.12.2015, 13:32 [5813 просмотров]


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

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