O céu está esperando por uma chuva forte e eu estou esperando por você, la la la, bem-vindo para acompanhar meu pequeno livro. O que estou compartilhando hoje é o método original de imitar as curvas de Bézier na tela. Os detalhes são os seguintes:
Renderização:
HTML
<canvas id=mycanvas width=500 height=500>Seu navegador não suporta canvas</canvas>
css
canvas{ borda: 1px preto sólido;}js
var canvas = document.getElementById(mycanvas); /Desenhe uma linha semitransparente context.beginPath(); context.lineTo(0,500); context.strokeStyle = rgba(0,0,0,0.3); context.lineWidth = 10; 0,500); context.lineTo(x1,y1); context.lineWidth = 2; context.beginPath(); context.moveTo(500,0); context.lineTo(x2,y2); context.lineWidth = 2; context.strokeStyle = black; startPath(); context.arc(x1,y1,10,0,Math.PI*2); //Desenhe uma bola azul context.beginPath(); context.arc(x2,y2,10,0,Math.PI*2); context.bezierCurveTo(x1,y1,x2,y2,500,0); 5; context.stroke(); //Arraste a bola para animar//Determine se deve arrastar a bola//Se ela estiver na bola, anime canvas.onmousedown = function(e){ var ev = e || .event; var x = ev.offsetX; var y = ev.offsetY; //Determina se está na bola vermelha var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2); if(dis<100){ console.log(mouse está na bola vermelha).onmousemove = function(e){ var ev = e || ; var xx = ev.offsetX; var yy = ev.offsetY; //Limpa a tela context.clearRect(0,0,canvas.width,canvas.height); xx; y1 = yy; //Redesenhar draw(); //Determina se o mouse está na bola azul var dis = Math.pow((x-x2),2) + Math.pow((y-y2) ) ,2); if(dis<100){ canvas.onmousemove = function(e){ var ev = e || janela.event; ev.offsetY; //Limpa a tela context.clearRect(0,0,canvas.width,canvas.height); //Redesenhar draw(); ){ tela.onmousemove = }O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.