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


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

Кривая Безье. Canvas

Для построения кривых Безье в Canvas используются два метода: quadraticCurveTo и bezierCurveTo.

Давайте рассмотрим небольшой пример, где мы с вами построим кубическую кривую:

<!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 bezier = canvas.getContext('2d'); 
    bezier.beginPath();
        bezier.strokeStyle = "red";
        bezier.moveTo(50, 105);
       bezier.bezierCurveTo(115, 145, 215, 40, 240, 105);
       bezier.stroke();
 bezier.beginPath();
        bezier.strokeStyle = "black";
      bezier.moveTo(140, 175);
        bezier.bezierCurveTo(165, 85, 255, 40, 240, 105);
		bezier.stroke();
  </script>
</body>
</html>

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

Кубическая кривая Безье

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

<!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 bezier = canvas.getContext('2d'); 
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;
    bezier.beginPath();
        bezier.strokeStyle = "red";
        bezier.moveTo(50, 105);
    bezier.bezierCurveTo(115, 145, 215, 110, 240, 105);
    bezier.moveTo(50, 105);
    bezier.quadraticCurveTo(130, 190, 240, 105);
        bezier.stroke();
        bezier.beginPath();
        bezier.strokeStyle = "green";
        bezier.arc(100,80,15,x1,x2); 
        bezier.stroke();
        bezier.beginPath(); 
        bezier.arc(190,80,15,x1,x2); 
        bezier.stroke();
        bezier.beginPath();
        bezier.strokeStyle = "black";
        bezier.arc(145,115,115,x1,x2);
        bezier.stroke();
  </script>
</body>
</html>

В результате получится вот такой рисунок:

Кривая Безье в HTML5

Это был простейший пример использования данных кривых. В следующем уроке мы разберем стили, использующие для рисования на холсте.



наверх