наверх





<canvas> - новый тег, пришедший из HTML5, который предназначен для создания на странице различных рисунков, анимаций и прочих вещей, которых мог бы заменить графический редактор.


С помощью тега <canvas> можно создавать не только статические рисунки, но и различные анимации и даже игры. Но, с использованием тега <canvas> необходимо знать javascript, без которого работа с тегом <canvas> бесполезна, так как само создание рисунков происходит именно через javascript.

Сам тег <canvas> является лишь меткой, которой может быть выдан свой идентификатор и класс, после чего его можно будет расположить на любой части страницы, а он будет вызывать javascript, и будет отображаться сам рисунок.

Но, зачем использовать тег <canvas> и javascript, если можно обойтись любым графическим редактором? Здесь есть разные причины... Например, через данный тег можно создавать различные мелкие детали к дизайну, без использования изображений, это будет удобно и не нужно будет загружать изображения.

Но давайте теперь перейдем к самому примеру. Он заключается в "живом" фоне, созданном из радиального градиента, причем центр этого самого градиента - это указатель мышки. То есть, если навести на определенную точку в данном фоне, то около мышки изменится сам фон. Пример простой и может быть полезным, в создании фона для сайта или блока меню.

HTML



Так как, тег <canvas> будет использован лишь один раз, поэтому присуждать ему какой-нибудь идентификатор нет смысла, просто размещаем его после тега <body>:

<canvas></canvas>


JavaScript


Здесь все посложнее. Для простоты я отметил комментарием нужные вам моменты, чтобы вы могли их изменить, если это будет необходимо.

<script>
var canvas = document.getElementsByTagName('canvas')[0],
    ctx = null,
    grad = null,
    body = document.getElementsByTagName('body')[0],
    color = 255; //изначальный цвет фона сайта
    
if (canvas.getContext('2d')) {
  ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, 600, 600);
  ctx.save();
  
  // создание радиального градиента
  grad = ctx.createRadialGradient(0,0,0,0,0,600); 
  grad.addColorStop(0, '#DFDFDF');
  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');

  // сам фон-градиент
  ctx.fillStyle = grad;

  body.onmousemove = function (event) {
    var width = window.innerWidth, 
        height = window.innerHeight, 
        x = event.clientX, 
        y = event.clientY,
        rx = 600 * x / width,
        ry = 600 * y / height;
        
    var xc = ~~(256 * x / width);
    var yc = ~~(256 * y / height);

    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 500);  //размер указателя мышки
    grad.addColorStop(0, '#478CFB'); //цвет  указателя мышки
    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
    // ctx.restore();
    ctx.fillStyle = grad;
    ctx.fillRect(0,0,600,600);
    // ctx.save();
  };
}
</script>


CSS



Да, стоит так же поработать и со стилями тега <canvas>, хотя бы чтобы зафиксировать данный градиент как фон и сделать его "резиновым":

canvas {
  position: absolute; /* позиционирование */
  top: 0;    /* фиксируем */
  left: 0;    /* фиксируем */
  height: 100%; /* делаем фон резиновым */
  width: 100%;    /* делаем фон резиновым */
}


В принципе, наш радиальный градиент-фон готов. Но, можно по середине расположить текст, и чтобы при наведении на середину курсором этот текст исчезал. Это делается просто, нужно лишь тексту задать цвет текста, как цвет фона курсора мышки:

.bluecode {
  color:#478CFB; /* цвет текста, он же фон курсора мышки */
  text-align:center; /* расположение текста по центру  */
  margin-top:35%; /* Отступ сверху */
  font:25pt Ubuntu Mono, 'Homenaje', sans-serif; /* Размер, семейство шрифта */
  text-transform:uppercase; /* Все буквы заглавные */
}


Так же, что бы данный текст отображался, нужно к стилям тега <canvas> добавить z-index с отрицательным значением:

canvas {
...
  z-index:-1;
}


HTML


<div class="bluecode">BlueCode.ru<br>
<div style="font-size:16pt;">
Создание "живого" радиального градиента, с использование JS и тега canvas
</div>
</div>





Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 1


serhii 25 июня, 14:51 ответить #

Спасибо, отлично, именно это и искал!
Было бы круто если бы вы в конце выложили весь уже готовый код :)

У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.