Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Primenenie-stilej-v-canvas-urok-2

Применение стилей в Canvas. Урок №2

В этом уроке мы рассмотрим применение градиента и тени в canvas.

Градиент

В Canvas поддерживаются два вида градиента: линейный и радиальный. Для их применения используются следующие методы:

Следует отметить, что радиальный градиент рисуется по конусу между двумя окружностями. И так давайте же применим эти методы:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кубические кривые Безье</title>
</head>
<body>
<style>
canvas{
border:1px solid #a1a4a8; 
-moz-border-radius:20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius:20px;
padding-top:20px;
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555;}
</style>
<canvas id='Mycanvas' width="400" height="300">Обновите 
браузер</canvas>
  <script>    
    var canvas = document.getElementById('Mycanvas');
 var gradient = canvas.getContext('2d');
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
/* Создаем градиент */
var grad = gradient.createLinearGradient(60,100,145,170);
/* Добавляем точки цветового перехода */
gradient.beginPath()
grad.addColorStop(0.0,'black');
grad.addColorStop(1.0,'white');
/* Устанавливаем получившийся градиент как свойство заливки */ 
gradient.fillStyle=grad;
/* Рисуем фигуру, к которой будет применен созданный градиент */
        gradient.arc(75,150,35,x1,x2);
        gradient.fill();
gradient.beginPath()
var grad = gradient.createRadialGradient(200, 150, 100, 230,
 200, 40);
grad.addColorStop(0.0,'black');
grad.addColorStop(0.5,'green');
gradient.fillStyle=grad;
gradient.fillRect(180,60,200,200);
  </script>
</body>
</html>

В результате должно получиться следующее:

Градиент в canvas

Тени в canvas

Для оформления теней в canvas используются следующие методы:

Рассмотрим небольшой пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кубические кривые Безье</title>
</head>
<body>
<style>
canvas{
border:1px solid #a1a4a8; 
-moz-border-radius:20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius:20px;
padding-top:20px;
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555;}
</style>
<canvas id='Mycanvas' width="400" height="300">Обновите 
браузер</canvas>
 <script>    
    var canvas = document.getElementById('M2canvas');
 var gradient = canvas.getContext('2d');
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
// Создаем градиент 
var grad = gradient.createLinearGradient(80,140,195,200);
// Добавляем точки цветового перехода 
gradient.beginPath()
grad.addColorStop(0.0,'red');
grad.addColorStop(0.5,'navy');
grad.addColorStop(1.0,'white');
// Устанавливаем получившийся градиент как свойство заливки
gradient.fillStyle=grad;
// Рисуем фигуру, к которой будет применен созданный градиент 
        gradient.arc(150,150,55,x1,x2);
// Используем тень для объекта 
        gradient.shadowOffsetX=3;
		gradient.shadowOffsetY=3;
		gradient.shadowBlur=10;
		gradient.shadowColor='black';
        gradient.fill();
  </script>
</body>
</html>

Должно получиться следующее:

Тени в canvas

Как видно из примера применить тень не так уж сложно. Вдобавок вы получаете хороший визуальный эффект. Ну вот кажется это всё, что я хотел вам рассказать о стилях в canvas. Думаю вы найдёте применение каждому из методов.



наверх