Ответ 1
Как вы обнаружили, как квадратичные кривые, так и кривые Cubic Bezier просто соединяют 2 точки с кривой.
Поскольку кубическая кривая имеет больше контрольных точек, она более гибкая в пути, который требуется между этими двумя точками.
Например, скажем, вы хотите нарисовать эту букву "R":
Начните рисовать с помощью "неперекрывающихся" частей R:
Теперь попробуйте рисовать кривую квадратичной кривой.
Обратите внимание, что квадратичная кривая более "заостренная", чем мы хотим.
Это потому, что у нас есть только одна контрольная точка для определения квадратичной кривизны.
Теперь попробуйте рисовать кривую с кубической кривой безье.
Кубическая кривая Безье более хорошо округлена, чем квадратичная.
Это потому, что у нас есть 2 контрольных точки для определения кубической кривизны.
Итак... больше контрольных точек дает больший контроль над "извилистостью"
Вот код и скрипт: http://jsfiddle.net/m1erickson/JpXZW/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth=8;
ctx.lineCap="round";
function baseR(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(30,200);
ctx.lineTo(30,50);
ctx.lineTo(65,50);
ctx.moveTo(30,120);
ctx.lineTo(65,120);
ctx.lineTo(100,200);
ctx.strokeStyle="black";
ctx.stroke()
}
function quadR(){
ctx.beginPath();
ctx.moveTo(65,50);
ctx.quadraticCurveTo(130,85,65,120);
ctx.strokeStyle="red";
ctx.stroke();
}
function cubicR(){
ctx.beginPath();
ctx.moveTo(65,50);
ctx.bezierCurveTo(120,50,120,120,65,120);
ctx.strokeStyle="red";
ctx.stroke();
}
$("#quad").click(function(){
baseR();
quadR();
//cubicR();
});
$("#cubic").click(function(){
baseR();
cubicR();
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="quad">Use Quadratic curve</button>
<button id="cubic">Use Cubic Bezier curve</button><br><br>
<canvas id="canvas" width=150 height=225></canvas>
</body>
</html>