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


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

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

В данном уроке мы рассмотрим применение стилей для линий и фигур.

Цвета для фигур.

В предыдущих уроках мы уже использовали два метода для закрашивания фигур: fillStyle и strokeStyle. Давайте рассмотрим их подробнее:

Причем цвет для фигур задаётся также как и в таблицах стилей CSS, но в отличие от CSS в Canvas можно задать не только цвет, но прозрачность фигуры с помощью rgba:

<!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 holst = canvas.getContext('2d');
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
holst.beginPath();
holst.fillStyle = "rgb(255,0,0)";  
holst.fillRect(50, 25, 100, 100);  
holst.fillStyle = "rgba(0, 0, 200, 0.5)";   
holst.fillRect(100, 75, 100, 100);
holst.beginPath();
        holst.fillStyle="rgba(0,0,0,0.2)";
        holst.arc(75,150,35,x1,x2);
        holst.fill();
  </script>
</body>
</html>

В результате можно увидеть три фигуры, двум из которых мы задали прозрачность (окружность и синий квадрат):

Использование метода fillStyle

Оформление линий

Линии в Canvas оформляются с помощью следующих методов: lineWidth, lineCap, lineJoin

Рассмотрим небольшой пример применения этих методов:


<!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='Mcanvas' width="400" height="300"></canvas>
  <script>    
    var canvas = document.getElementById('Mcanvas');
    var liniya = canvas.getContext('2d');
//Сглаживаем стыки линий 
liniya.beginPath()
liniya.moveTo(60,60);
liniya.lineWidth=25;
liniya.lineJoin='round';
liniya.lineTo(110,120);
liniya.lineTo(150,70);
liniya.lineTo(190,110);
liniya.stroke();
//Делаем законцовку последней стыковой линии круглой
liniya.beginPath()
liniya.moveTo(190,110);
liniya.lineCap='round';
liniya.lineTo(210,40);
liniya.stroke();
//Рисуем полупрозрачную прямую линию с квадратными законцовками
liniya.beginPath()
liniya.lineWidth=15;
liniya.strokeStyle="rgba(0,0,0,0.2)";
liniya.lineCap='square';
liniya.moveTo(30,80);
liniya.lineTo(250,60);
liniya.stroke();
  </script>
</body>
</html> 

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

Оформление линий в canvas

Нужно отметить, что в вышеуказанном примере методы lineWidth, lineCap, lineJoin применяются для линий, которые нарисованы с помощью метода lineTo. Предлагаю немного потренироваться и переходить к следующему уроку. Дальше вас ждет использование градиента и теней.



наверх