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


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

Canvas. Линии и дуги

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

Для рисования дуги мы будем использовать ещё один метод:

Следует отметить, что углы дуги задаются в радианах (радианы=(Math.PI/180)*градусы). Также нам понадобятся методы, которые используются для рисования составных фигур:

Ну что же с методами мы познакомились, пора перейти к делу:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas для IE</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 = "rgba(0, 0, 200, 0.5)";
holst.arc(100,100,50,x1,x2);
holst.fill();
holst.strokeStyle = "green";
holst.strokeRect(50,50,100,100);
holst.closePath();
var x=canvas.getContext("2d");
x.beginPath();
x.fillStyle = "red";
x.moveTo(30,50);
x.lineTo(170,50);
x.lineTo(100,10);
x.closePath();
x.fill();
 </script>
</body>
</html>

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

Линии и дуги в canvas

На примере видно как легко можно нарисовать простые фигуры (квадрат, треугольник и круг). В следующих уроках мы с вами научимся рисовать кривые Безье и применять некоторые стили для наших фигур.



наверх