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


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Canvas-risuem-pryamougolniki

Canvas. Рисуем прямоугольники

В этом уроке мы придадим стиля нашему холсту и нарисуем простые прямоугольники. Стили для тега canvas применяются также как и для любого другого элемента. Давайте немного украсим наш холст будем использовать вот такой код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas для IE</title>
<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->
<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>
</head>
<body>
<script>
 var canvas = document.getElementById('Mycanvas');
 var holst = canvas.getContext('2d'); 
 </script>
<canvas class="box" id="Mycanvas" width="400" height="300"></canvas>
</body>
</html>

Пока что холст чист, но его уже можно увидеть. Для того, чтобы нарисовать прямоугольник или прямоугольники на холсте существуют три функции:

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas для IE</title>
<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->
<style>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>
</head>
<body>
<canvas class="box" id="Mycanvas" width="400" height="300"></canvas>
<script>
 var canvas = document.getElementById('Mycanvas');
 var holst = canvas.getContext('2d');
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.strokeStyle = "green";
holst.strokeRect(75, 50, 100, 100);
 </script>
</body>
</html>

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

Рисуем прямоугольники

Следует отметить, что координаты x и у задаю положение наших прямоугольников по горизонтали(x) и по вертикали (y), а начало координат начинается с левого верхнего угла. Как видите ничего сложного здесь нет. Если возникли затруднения, спрашивайте не стесняйтесь.



наверх