Un altro esempio: le curve di Bézier, ideate dall'ingegnere francese Pierre Bézier per disegnare il profilo di alcune automobili Renault. Sono curve
descritte da equazioni parametriche
Sotto come realizzare in JavaScript, con i comandi quadraticCurveTo e bezierCurveTo, alcune particolari curve di Bézier (una di grado 2 e due di grado 3, con gli stessi punti di riferimento ma in ordine diverso).
<canvas width=400 height=400></canvas>
<script>
c = document.querySelector("canvas").getContext("2d")
c.strokeStyle="brown"
c.beginPath(); c.arc(325,100, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.arc(225,125, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.arc(250,200, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.moveTo(325,100); c.lineTo(250,200); c.moveTo(225,125); c.lineTo(250,200); c.stroke()
c.strokeStyle="blue"
c.beginPath(); c.lineWidth=3; c.moveTo(225,125); c.quadraticCurveTo(250,200, 325,100); c.stroke()
c.lineWidth=1; c.strokeStyle="brown"
c.beginPath(); c.arc(25,100, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.arc(225,50, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.arc(105,160, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.arc(45,30, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.moveTo(25,100);c.lineTo(45,30); c.moveTo(225,50);c.lineTo(105,160); c.moveTo(45,30);c.lineTo(105,160); c.stroke()
c.strokeStyle="blue"
c.beginPath(); c.lineWidth=3; c.moveTo(25,100); c.bezierCurveTo(45,30, 105,160, 225,50); c.stroke()
c.lineWidth=1; c.strokeStyle="brown"
c.beginPath(); c.arc(25,300, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.arc(225,250, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.arc(105,360, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.arc(45,230, 5, 0,Math.PI*2); c.stroke()
c.beginPath(); c.moveTo(25,300);c.lineTo(45,230); c.moveTo(225,250);c.lineTo(105,360); c.moveTo(25,300);c.lineTo(105,360); c.stroke()
c.strokeStyle="blue"
c.beginPath(); c.lineWidth=3; c.moveTo(45,230); c.bezierCurveTo(25,300, 105,360, 225,250); c.stroke()
</script>
=========
=========