Как вы обнаружили, как квадратичные кривые, так и кривые Cubic Bezier соединяют только 2 точки с кривой.
Поскольку кубическая кривая имеет больше контрольных точек, она более гибкая по пути, который требуется между этими двумя точками.
Например, предположим, что вы хотите сделать это письмо «R»:
Начните рисовать с «не-curvey» части R:
Теперь попробуйте рисовать кривую квадратичной кривой.
Обратите внимание, что квадратичная кривая более «заостренная», чем мы того желаем.
Это потому, что у нас есть только 1 контрольная точка для определения квадратичной кривизны.
Теперь попробуйте нарисовать кривую с кубической кривой Безье.
Кубическая кривая Безье более хорошо округлена, чем квадратичная.
Это потому, что у нас есть 2 контрольных точки для определения кубической кривизны.
Итак ... больше контрольных точек дает больший контроль над "curviness"
Вот код и Fiddle: 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>
[Wikipedia summary.] (Http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B.C3.A9zier_curves) В основном это связано с тем, что вы хотите, чтобы ваши кривые выглядели. Квадратичные кривые - это конические сечения. – Pointy