Beispielcode für die Leinwandimitation der Bezier-Kurve

Der Himmel wartet auf nebligen Regen, und ich warte auf Sie, la la la, herzlich willkommen, meinem kurzen Buch zu folgen. Was ich heute mit Ihnen teile, ist die ursprüngliche Methode, Bezier-Kurven auf Leinwand zu imitieren. Die Einzelheiten lauten wie folgt:

Darstellung:

html

 <canvas id=mycanvas width=500 height=500>Ihr Browser unterstützt kein Canvas</canvas>

CSS

 Leinwand{ Rand: 1px einfarbig schwarz;}

js

 var canvas = document.getElementById(mycanvas); var x1 = 100; var x2 = 400; /Zeichne eine halbtransparente Linie context.beginPath(); context.moveTo(500,0); context.lineTo(0,500); context.moveStyle = rgba(0,0,0,0.3); context.lineWidth = 10; context.moveTo(); 0,500 ); context.lineTo(x1,y1); context.lineWidth = 2; context.StrokeStyle = black; context.beginPath(); context.lineTo(x2,y2); context.lineWidth = 2; context.Stroke(); beginPath (); context.arc(x1,y1,10,0,Math.PI*2); context.fillStyle = orange; //Zeichne einen blauen Ball context.beginPath(); context.arc(x2,y2,10,0,Math.PI*2); context.fillStyle = blue; .beginPath(); context.moveTo(0,500); context.bezierCurveTo(x1,y1,x2,y2,500,0); 5; context.Stroke(); } //Ziehen Sie den Ball zum Animieren//Bestimmen Sie, ob der Ball gezogen werden soll//Wenn er sich auf dem Ball befindet, animieren Sie Canvas.onmousedown = function(e){ var ev = e || .event; var x = ev.offsetX; var y = ev.offsetY; //Bestimmen Sie, ob es auf der roten Kugel liegt var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2); if(dis<100){ console.log(mouse is on the red ball); ; var xx = ev.offsetX; var yy = ev.offsetY; //Löschen Sie die Leinwand context.clearRect(0,0,canvas.width,x1 =). xx; y1 = yy; //Zeichne neu zeichnen(); } //Bestimmen Sie, ob sich die Maus auf dem blauen Ball befindet var dis = Math.pow((x-x2),2) + Math.pow((y-y2 ) ,2); if(dis<100){ canvas.onmousemove = function(e){ var ev = e || ev.offsetY; //Löschen Sie die Leinwand context.clearRect(0,0,canvas.width,canvas.height); x2 = xx1; //Redrawdraw(); ){ canvas.onmousemove = ;

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.