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 и тег <canvasas>.</p>
<p>Попробуйте использовать один из следующих браузеров:</p>
<ul>
<li>Chrome (>4.0)</li>
<li>Opera (>9.0)</li>
<li>Opera Mobile (>10.0)</li>
<li>Firefox (>2.0)</li>
<li>Safari (>3.1)</li>
<li>iOS Safari (>3.2)</li>
<li>Android Browser (>2.1)</li>
<li>Internet Explorer (<b>>=9.0</b> - для самых маленьких)</li>
</ul>
</canvas>
</body></html>
Сайт Алексея Мичурина - полезные онлайн-инструменты
06.12.2015, 13:32 [5729 просмотров]