0
196
ViewsLienzo HTML simple que no muestra la forma completa
Soy nuevo en el lienzo HTML, estoy tratando de dibujar un cilindro con diferentes colores usando JavaScript, puedo ver el dibujo pero la forma no se muestra completamente, se supone que es una forma completamente ilustrada con colores. Traté de cambiar la configuración de ancho y alto, pero estiró la forma en sí.
var canvas = document.getElementById("cylinder"); var ctx = canvas.getContext("2d"); drawCylinder(canvas, ctx, "lightblue", "black", 3); function drawCylinder(canvas, ctx, fill, border, lineWidth, r, centX, centY) { //canvas.width = 160; var centX = 0; var centY = -100; var r = 30; ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(6, 1); ctx.beginPath(); ctx.arc(centX, centY, r, 0, 2 * Math.PI, false); ctx.restore(); ctx.fillStyle = 'YellowGreen'; ctx.fill(); ctx.lineWidth = 7; ctx.strokeStyle = 'GainsBoro'; ctx.stroke(); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(6, 1); ctx.beginPath(); ctx.arc(centX, 100, r, 0, 2 * Math.PI, false); ctx.restore(); ctx.fillStyle = 'MediumSlateBlue'; ctx.fill(); ctx.lineWidth = 7; ctx.strokeStyle = 'GainsBoro'; ctx.stroke(); ctx.save(); ctx.lineWidth = 3; ctx.strokeStyle = 'Black'; ctx.moveTo(105, 150); ctx.lineTo(105, 352); ctx.moveTo(474, 150); ctx.lineTo(474, 352); ctx.stroke(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(6, 1); ctx.beginPath(); ctx.arc(centX, centY+2, r+0.8, 0, Math.PI, false); ctx.restore(); ctx.lineWidth = 4; ctx.strokeStyle = 'Black'; ctx.stroke(); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(6, 1); ctx.beginPath(); ctx.arc(centX, 100+2, r+0.8, 0, Math.PI, false); ctx.restore(); ctx.lineWidth = 4; ctx.strokeStyle = 'Black'; } <div> <canvas id="cylinder" width="300" height="400"></canvas> </div>No estoy seguro de por qué se muestra así, ¿puedes ayudar al hermano?
El lienzo debe verse como una imagen a continuación.
1 answers
Answer question0
Tienes una forma bastante única de dibujar un cilindro. Por supuesto, puede hacerlo dibujando primero un círculo y luego escalando el contexto verticalmente para finalmente estirar el círculo a una elipse, pero hagámoslo un poco diferente.
Fuera de la caja, CanvasRenderingContext2D tiene un método integrado para dibujar una elipse, convenientemente llamado ellipse() .
Entonces, puede comenzar dibujando una elipse para la parte superior, otra elipse para la parte inferior y finalmente conectarlos con un contorno negro.
Algo como:
var canvas = document.getElementById("cylinder"); var ctx = canvas.getContext("2d"); drawCylinder(canvas, ctx, "lightblue", "black", 7, 100, 0, -100); function drawCylinder(canvas, ctx, fill, border, lineWidth, r, centX, centY) { ctx.translate(canvas.width / 2, canvas.height / 2); ctx.lineWidth = lineWidth; ctx.beginPath(); ctx.ellipse(centX, centY, r, r / 5, 0, 0, 2 * Math.PI); ctx.fillStyle = 'YellowGreen'; ctx.strokeStyle = 'GainsBoro'; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.ellipse(centX, centY + 100, r, r / 5, 0, 0, 2 * Math.PI); ctx.fillStyle = 'MediumSlateBlue'; ctx.strokeStyle = 'GainsBoro'; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.lineWidth = 1; ctx.strokeStyle = 'Black'; ctx.beginPath(); ctx.ellipse(centX, centY, r + lineWidth / 2, r / 5 + lineWidth / 2, 0, 0, 1 * Math.PI); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.ellipse(centX, centY + 100, r + lineWidth / 2, r / 5 + lineWidth / 2, 0, 0, 1 * Math.PI); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(centX - r - lineWidth / 2, centY); ctx.lineTo(centX - r - lineWidth / 2, centY + 100); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(centX + r + lineWidth / 2, centY); ctx.lineTo(centX + r + lineWidth / 2, centY + 100); ctx.stroke(); ctx.closePath(); } <canvas id="cylinder" width="300" height="400"></canvas>