Le ciel attend une pluie brumeuse, et je vous attends, la la la, bienvenue pour suivre mon petit livre. Ce que je partage aujourd'hui, c'est la méthode originale d'imitation des courbes de Bézier sur toile. Les détails sont les suivants :
Rendu :
HTML
<canvas id=mycanvas width=500 height=500>Votre navigateur ne prend pas en charge le canevas</canvas>
css
toile{ bordure : 1px noir uni ;}js
var toile = document.getElementById(mycanvas); var contexte = toile.getContext(2d); var x1 = 100; var x2 = 400; /Dessine une ligne semi-transparente context.beginPath(); context.moveTo(500,0); context.lineTo(0,500); context.StrokeStyle = rgba(0,0,0,0.3); context.lineWidth = 10; context.Stroke(); //Dessiner une ligne de connexion context.beginPath(); 0,500 ); contexte.lineTo(x1,y1); contexte.lineWidth = 2; context.beginPath(); context.moveTo(500,0); context.lineTo(x2,y2); context.lineWidth = 2; context.StrokeStyle = black; context.Stroke(); startPath (); contexte.arc(x1,y1,10,0,Math.PI*2); contexte.fillStyle = orange; //Dessine une boule bleue context.beginPath(); context.arc(x2,y2,10,0,Math.PI*2); context.fillStyle = blue; context.fill(); .beginPath(); contexte.moveTo(0,500); contexte.bezierCurveTo(x1,y1,x2,y2,500,0); 5; context.stroke(); } //Faites glisser la balle pour l'animer//Déterminez si vous devez faire glisser la balle//Si elle est sur la balle, animez canvas.onmousedown = function(e){ var ev = e || .event; var x = ev.offsetX; var y = ev.offsetY; //Déterminer s'il est sur la boule rouge var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2); if(dis<100){ console.log(la souris est sur la boule rouge); canvas.onmousemove = function(e){ var ev = e || ; var xx = ev.offsetX; var yy = ev.offsetY; //Effacer le contexte.clearRect(0,0,canvas.width,canvas.height); xx; y1 = yy; //Redessiner (); } } //Déterminer si la souris est sur la boule bleue var dis = Math.pow((x-x2),2) + Math.pow((y-y2 ) ,2); if(dis<100){ canvas.onmousemove = function(e){ var ev = e || var xx1 = ev.offsetX; ev.offsetY; //Effacer le canevas context.clearRect(0,0,canvas.width,canvas.height); x2 = xx1; //Redessiner draw(); ){ toile.onmousemove = ;Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.