Как вы обнаружили, и квадратичные кривые, и кубические кривые Безье просто соединяют 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>
person
markE
schedule
15.09.2013
bezierCurveTo()предполагается кубической. Я пришел сюда искать разницу междуquadraticCurveTo()иbezierCurveTo():-) - person PJ Brunet schedule 15.04.2020