Retourner à la page d'accueil de TJS

Méthode : CanvasRenderingContext2D.bezierCurveTo()

          

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

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 15/12/2018 11:14:47 sur php7 en 41.23 ms