Главная / Верстка / Веб решения / canvas - интерактивный градиент фона

canvas - интерактивный градиент фона


29.06.2013 20:503204

В данном примере можно увидеть как с помощью применения тега  canvas  и java script можно создать интерактивный градиент реагирующий на движение мышки. Получается очень красиво , блик света как будто отражается от мышки на поверхность. С появлением canvas стало возможным увеличение интерактивности, создание различных графиков, и даже игр.

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset=utf-8 />
    <title>Canvas Gradient</title>
    <style>
      body {
        background: #FF00FF;
      }
      canvas {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  
  <body>
    <canvas></canvas>
    <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();
        // Create radial gradient
        grad = ctx.createRadialGradient(0, 0, 0, 0, 0, 600);
        grad.addColorStop(0, '#FF0000');
        grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
        // assign gradients to fill
        ctx.fillStyle = grad;
        // draw 600x600 fill
        ctx.fillRect(0, 0, 600, 600);
        ctx.save();
        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, 600);
          grad.addColorStop(0, '#FFF');
          grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
          // ctx.restore();
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, 600, 600);
          // ctx.save();
        };
      }
    </script>
  </body>

</html>


Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Canvas , Html5 Canvas , Градиент





«canvas - интерактивный градиент фона» - Похожие страницы

CSS градиент CSS градиент Градиент – это заполнение определенной области выбранными цветами с равномерными переходами между цветовыми оттенками. В градиенте можно использовать множество различных цветов, больше двух. До сегодняшнего ...
canvas тег html canvas тег html Тег canvas используется в html для создания области , в которой  можно рисовать разные объекты ,  выводить и трансформировать  изображения , изменять  их свойства  ,  создавать  анимацию , игры ,   рисунки ....

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям