0
313
VistasObtenga las coordenadas de los puntos en una elipse en HTML5 Canvas
En HTML5 Canvas, sé que puedo dibujar una elipse con CanvasRenderingContext2D.ellipse() , pero ¿cómo puedo dibujar algunos puntos en la ruta de la elipse?
Puedo dibujar puntos en un camino circular usando los siguientes códigos:
const canvas = document.getElementById('thumbCanvas'); const ctx = canvas.getContext('2d'); const distance = 200; const centerX = canvas.width / 2; const centerY = canvas.height / 2; var angle = 0; for(i = 0; i < 36; i++) { angleInRadian = angle * Math.PI / 180; ctx.fillRect(centerX - imgWidth / 2 + distance * Math.cos(angleInRadian), centerY - imgHeight / 2 + distance * Math.sin(angleInRadian), 5, 5); angle += 10; } 
pd ignore los colores y el punto en el centro.
Pero, ¿cómo hacer esto con una elipse? No quiero usar ctx.scale() para distorsionar toda la imagen.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Por el momento, sus pequeños rectángulos se dibujan a lo largo de un círculo perfecto porque la distance desde el centro es siempre la misma. Si quieres dibujar un óvalo, tienes que variar la distancia horizontal y verticalmente.
Por ejemplo:
const canvas = document.getElementById('thumbCanvas'); const ctx = canvas.getContext('2d'); const distanceX = 60; const distanceY = 30; const centerX = canvas.width / 2; const centerY = canvas.height / 2; let imgWidth = 10; let imgHeight = 10; var angle = 0; for (i = 0; i < 36; i++) { angleInRadian = angle * Math.PI / 180; ctx.fillRect(centerX - imgWidth / 2 + distanceX * Math.cos(angleInRadian), centerY - imgHeight / 2 + distanceY * Math.sin(angleInRadian), 5, 5); angle += 10; } <canvas id="thumbCanvas"></canvas>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta