javascript를 사용하여 html 캔버스에 나비 그래프 그리기

Question

javascript를 사용하여 html 캔버스에 나비 모양의 그래프를 그리려고합니다. 그래프의 파라 방정식은 :

• X = (E^(선정) -2cos4t + 죄^5의 (t/12)) 신트
• Y = (E^(선정) -2cos4t + 죄^도 5의 (t/12))가 I 노력 해왔다
• TE [0 20.5]

비용하지만 알아낼 수 없다. 도와 줘서 고마워.

Answer 1

자바 스크립트 캔버스에서 매개 변수가있는 2D 커브를 그리는 데 필요한 최소의 리 사쥬 곡선 예입니다. 당신은

// get the handles and info on the HTML elements 
 
var canvas = document.getElementById('Canvas'); 
 
var width = canvas.width; 
 
var height = canvas.height; 
 
var context = canvas.getContext('2d'); 
 

 
// construct a local coordinate system that is 
 
// slightly larger than [-1,1]x[-1,1] 
 
context.translate(width/2, height/2); 
 
context.scale(width/2.1, height/2.1); 
 
context.lineWidth = 0.02; 
 

 
// construct and draw the curve 
 
context.beginPath(); 
 
context.moveTo(0,0); 
 
for(var x = 0; x < 6*Math.PI; x += 0.05) 
 
    context.lineTo(Math.sin(3*x),Math.sin(4*x)); 
 
context.stroke();

<canvas id="Canvas" width = "200" height = "200" />