베지어 곡선의 캔버스 모방을 위한 샘플 코드

하늘은 안개비를 기다리고 있고, 라라라, 내 짧은 책을 따라오길 기다립니다. 오늘 제가 공유하는 것은 캔버스에 베지어 곡선을 모방하는 독창적인 방법입니다. 세부사항은 다음과 같습니다:

표현:

HTML

 <canvas id=mycanvas width=500 height=500>브라우저가 캔버스를 지원하지 않습니다</canvas>

CSS

 캔버스{ 테두리: 1px 단색 검정;}

JS

 var canvas = document.getElementById(mycanvas); var x1 = 100; var x2 = 400; function draw(); /반투명 선 그리기 context.beginPath() context.moveTo(500,0); context.lineTo(0,500); context.StrokeStyle = rgba(0,0,0,0.3); context.lineWidth = 10; context.strove(); //연결선 그리기 context.moveTo( 0,500); context.lineTo(x1,y1); context.lineWidth = 2; context.스트로크(); context.beginPath(); context.lineTo(x2,y2); context.lineWidth = 2; context.Stroke(); startPath(); context.arc(x1,y1,10,0,Math.PI*2); context.fillStyle = orange.fill(); //파란색 공 그리기 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(); } //공을 드래그하여 애니메이션을 적용합니다. //공을 드래그할지 여부를 결정합니다. //공 위에 있으면 애니메이션을 적용합니다. canvas.onmousedown = function(e){ var ev = e || .event; var x = ev.offsetX; var y = ev.offsetY; //빨간 공 위에 있는지 확인 var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2); if(dis<100){ console.log(마우스가 빨간 공 위에 있음); canvas.onmousemove = function(e){ var ev = e || ; var xx = ev.offsetX; var yy = ev.offsetY; //캔버스 context.clearRect(0,0,canvas.width,canvas.height); xx; y1 = yy; //다시 그리기 draw(); } } //마우스가 파란색 공 위에 있는지 확인 var dis = Math.pow((x-x2),2) + Math.pow((y-y2 ) ,2); if(dis<100){ canvas.onmousemove = function(e){ var ev = e || window.event; ev.offsetY; //캔버스 컨텍스트를 지웁니다.clearRect(0,0,canvas.width,canvas.height) x2 = xx1 = yy1; //다시 그리기 draw(); ){ canvas.onmousemove = ;

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.