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 [5813 просмотров]