Retourner à la page d'accueil de TJS

Méthode : CanvasRenderingContext2D.bezierCurveTo()

Compatible Internet Explorer / Edge  Compatible Chrome  Compatible Safari  Compatible Firefox  Compatible Opera  

Trace une courbe de Bézier dans le canvas

Syntaxe
myContext.bezierCurveTo(xc1, yc1, xc2, yc2, x2, y2)

Description
Trace une courbe de Bézier démarrant au point courant du contexte et jusqu'à la position (x2,y2), avec les points de controle (xc1, yc1) et (xc2, yc2).

Exemple Explication d'une courbe de Bézier
Code source
<canvas id="myCanvas" width="300" height="150"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

/* Courbe de Bézier */
myContext.strokeStyle="#00f";
myContext.lineWidth=3;
myContext.beginPath();
myContext.moveTo(10,10);
myContext.bezierCurveTo(50, 75, 250, 10, 280, 130);
myContext.stroke();

/* Les points de contrôle */
myContext.strokeStyle="#f00";
myContext.beginPath();
myContext.arc(50, 75, 3, 0, Math.PI*2);
myContext.stroke();
myContext.beginPath();
myContext.arc(250, 10, 3, 0, Math.PI*2);
myContext.stroke();
</script>

Résultat
Emulation de la console
Explication
La courbe de Bézier avec les 2 points de controles affichés en rouge.

Exemple Création d'icône
Code source
<div class="btn inline" onclick="majSize(512)">512 * 512</div>
<div class="btn inline" onclick="majSize(256)">256 * 256</div>
<div class="btn inline" onclick="majSize(128)">128 * 128</div>
<div class="btn inline" onclick="majSize(45)">48 * 48</div>

<div>
<div class="btn inline" onclick="ptcolor='#F00';dispIcone()">Avec les points de controle</div>
<div class="btn inline" onclick="ptcolor='#FFF';dispIcone()">Sans les points de controle</div>
</div>

<canvas id="icone" width="512" height="512"></canvas>


<script type="text/javascript">

var bgcolor="#000";
var ptcolor="#F00";

function majSize(size) {
   var icone=document.getElementById("icone");
   icone.width=size;
   icone.height=size;
   dispIcone();    
}

function dispIcone() {

   var icone=document.getElementById("icone");
   var myContext=icone.getContext("2d");
   
   var scale=icone.width;
   myContext.strokeStyle=bgcolor;
   myContext.fillStyle=bgcolor;
   myContext.lineWidth=3;
   myContext.beginPath();
   myContext.clearRect(0,0,scale,scale);
   myContext.moveTo(0.1*scale,0.3*scale);
   
   /* Courbe de Bézier haut */
   var xc1=0.1*scale, yc1=0.0*scale, xc2=0.9*scale, yc2=0.0*scale;
   myContext.bezierCurveTo(xc1, yc1, xc2, yc2, 0.9*scale,0.3*scale);
   
   /* Courbe de Bézier droite */
   var xc3=0.9*scale, yc3=0.5*scale, xc4=0.8*scale, yc4=0.7*scale;
   myContext.bezierCurveTo(xc3, yc3, xc4, yc4, 0.5*scale,0.95*scale);
   
   /* Courbe de Bézier gauche */
   var xc5=0.1*scale, yc5=0.5*scale, xc6=0.2*scale, yc6=0.7*scale;
   myContext.bezierCurveTo(xc6, yc6, xc5, yc5, 0.1*scale,0.3*scale);
   
   
   myContext.stroke();
   myContext.fill();
   
   if (ptcolor!="#FFF") {
       /* Tous les points de controle */
       myContext.strokeStyle=ptcolor;
       myContext.beginPath();
       myContext.arc(xc1, yc1, 3, 0, Math.PI*2);
       myContext.stroke();
       myContext.beginPath();
       myContext.arc(xc2, yc2, 3, 0, Math.PI*2);
       myContext.stroke();
       
       myContext.strokeStyle=ptcolor;
       myContext.beginPath();
       myContext.arc(xc3, yc3, 3, 0, Math.PI*2);
       myContext.stroke();
       myContext.beginPath();
       myContext.arc(xc4, yc4, 3, 0, Math.PI*2);
       myContext.stroke();
       
       myContext.strokeStyle=ptcolor;
       myContext.beginPath();
       myContext.arc(xc5, yc5, 3, 0, Math.PI*2);
       myContext.stroke();
       myContext.beginPath();
       myContext.arc(xc6, yc6, 3, 0, Math.PI*2);
       myContext.stroke();
   }
   
   /* TEXTE */
   var fontSize=Math.round(scale/2.25);
   myContext.fillStyle="#fff";
   myContext.font="bold "+fontSize+"px verdana";
   var width=myContext.measureText("IP").width;
   myContext.fillText("IP", 0.53*scale-width/2, 0.54*scale)

}

dispIcone();

</script>

<style type="text/css">
canvas#icone {
   margin-top:20px;
   border:1px solid #888;
   background: #fff;
}
div.btn {
   border:1px solid #999;
   padding:4px;
   border-radius:5px;
   margin:5px;
   cursor: pointer;
}
div.btn:hover {
   background:#999;
   color:#fff;
}
div.inline {
   display:inline-block;
}


</style>

Résultat
512 * 512
256 * 256
128 * 128
48 * 48
Avec les points de controle
Sans les points de controle
Emulation de la console
Explication
Création d'une icone pour l'extension Get My IP sur le navigateur Chrome

Page en rapport
Le tutoriel sur le dessin avec canvas
Page mise à jour le

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 24/10/2019 07:24:21 sur php7 en 24.63 ms