El cielo está esperando una lluvia brumosa y yo te estoy esperando, la la la, bienvenido a seguir mi breve libro. Lo que estoy compartiendo hoy es el método original de imitar las curvas de Bézier sobre lienzo. Los detalles son los siguientes:
Representación:
HTML
<canvas id=mycanvas width=500 height=500>Su navegador no soporta lienzo</canvas>
CSS
lienzo{ borde: 1px negro sólido;}js
var lienzo = document.getElementById(mycanvas); var contexto = lienzo.getContext(2d); var x1 = 100; var y1 = 100; var x2 = 400; /Dibuja una línea semitransparente context.beginPath(); context.moveTo(500,0); context.lineTo(0,500); context.strokeStyle = rgba(0,0,0,0.3); context.lineWidth = 10; context.stroke(); 0,500); contexto.lineTo(x1,y1); contexto.lineWidth = 2; contexto.strokeStyle = negro; context.beginPath(); context.moveTo(500,0); context.lineTo(x2,y2); context.lineWidth = 2; context.strokeStyle = black; comenzarPath (); contexto.arc(x1,y1,10,0,Math.PI*2 contexto.fillStyle = naranja; //Dibuja una bola azul context.beginPath(); context.arc(x2,y2,10,0,Math.PI*2); context.fillStyle = blue; .beginPath(); contexto.moveTo(0,500); contexto.bezierCurveTo(x1,y1,x2,y2,500,0); 5; context.stroke(); } //Arrastra la bola para animar//Determina si arrastrar la bola//Si está sobre la bola, animar canvas.onmousedown = function(e){ var ev = e || .event; var x = ev.offsetX; var y = ev.offsetY // Determina si está en la bola roja var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2); if(dis<100){ console.log(el mouse está en la bola roja); canvas.onmousemove = function(e){ var ev = e window.event ; var xx = ev.offsetX; var yy = ev.offsetY; //Borrar el lienzo context.clearRect(0,0,canvas.width,canvas.height); xx; y1 = yy; //Redibujar draw(); } } //Determinar si el mouse está sobre la bola azul 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; // Borrar el lienzo context.clearRect(0,0,canvas.width,canvas.height); x2 = xx1; //Redibujar draw(); ){ lienzo.onmousemove = ;Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.