2

Boa noite galera, é o seguinte, preciso preencher o sorriso do Snowman de vermelho. Mas não estou conseguindo, não sei se é porque estou algum erro no código ou se estou desenhando o sorriso errado. O sorriso eu desenhei com um semi círculo e tracei uma linha embaixo. Não sei se dá para fazer um semi círculo gordo sem traçar linha embaixo. O smile/sorriso está entre as linhas 56 e 60 Bom, segue o código que fiz:

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    const width = 800;
    const height = 500;
    const MID = width / 2;
    const GROUND = 400;
    
    ctx.fillStyle = "cyan";
    ctx.fillRect(0, 0, width, height);
    
    ctx.fillStyle = "blue";
    ctx.fillRect(0, GROUND, width, 100); // ground
    
    ctx.fillStyle = "yellow";
    ctx.beginPath();
    ctx.arc(800, -10, 80, 0, 2 * Math.PI); // SUN REVERSE
    ctx.fill()
    
    ctx.fillStyle = "black";
    ctx.font = "14px Arial";
    ctx.fillText("SAY HELLO TO MY SNOWMAN", 0, 11);
    
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.translate(40,0);
    ctx.arc(MID, GROUND - 265, 40, 0, 2 * Math.PI); // head
    ctx.fill();
    
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(MID, GROUND - 160, 70, 0, 2 * Math.PI); // upper torso
    ctx.fill();
    
    setTimeout
    ctx.fillStyle = "red"; // BUTTONS
    ctx.beginPath();
    ctx.arc(400, 225, 5, 0, 2 * Math.PI);
    ctx.arc(400, 255, 5, 0, 2 * Math.PI);
    ctx.fill();
    
    
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.arc(MID, GROUND, 100, 0, 2 * Math.PI); // lower torso
    ctx.fill();
    
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(MID - 15, GROUND - 275, 5, 0, 2 * Math.PI); // left eye
    ctx.arc(MID - -15, GROUND - 275, 5, 0, 2 * Math.PI);
    
    ctx.fill();
    
    
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(MID, GROUND - 260, 20, 25.1, Math.PI); // smile
    ctx.lineTo(MID - -20, GROUND - 260);
    ctx.stroke();
    
    ctx.moveTo(MID - 50, GROUND - 160);
    ctx.lineTo(MID - 140, GROUND - 160); // left arm
    ctx.stroke();
    
    ctx.moveTo(550,200);
    ctx.lineTo(450,240); // RIGHT arm
    ctx.stroke();
    
    ctx.moveTo(MID - 50, GROUND - 300);
    ctx.fillStyle = "red";
    ctx.lineTo(MID + 50, GROUND - 300); // brim of hat
    ctx.stroke();
    
    
    ctx.fillRect(MID - 30, GROUND - 340, 60, 40);
<canvas id="myCanvas" width="800" height="600"></canvas> 

1 Resposta 1

4

Se você quer preencher o sorriso do Boneco de Neve, faltou a chamada para ctx.fill() depois de desenhá-lo. Veja o código (a linha inserida está indicada com um comentário):

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

const width = 800;
const height = 500;
const MID = width / 2;
const GROUND = 400;

ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, width, height);

ctx.fillStyle = "blue";
ctx.fillRect(0, GROUND, width, 100); // ground

ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(800, -10, 80, 0, 2 * Math.PI); // SUN REVERSE
ctx.fill()

ctx.fillStyle = "black";
ctx.font = "14px Arial";
ctx.fillText("SAY HELLO TO MY SNOWMAN", 0, 11);

ctx.fillStyle = "white";
ctx.beginPath();
ctx.translate(40,0);
ctx.arc(MID, GROUND - 265, 40, 0, 2 * Math.PI); // head
ctx.fill();

ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(MID, GROUND - 160, 70, 0, 2 * Math.PI); // upper torso
ctx.fill();

setTimeout
ctx.fillStyle = "red"; // BUTTONS
ctx.beginPath();
ctx.arc(400, 225, 5, 0, 2 * Math.PI);
ctx.arc(400, 255, 5, 0, 2 * Math.PI);
ctx.fill();


ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(MID, GROUND, 100, 0, 2 * Math.PI); // lower torso
ctx.fill();

ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(MID - 15, GROUND - 275, 5, 0, 2 * Math.PI); // left eye
ctx.arc(MID - -15, GROUND - 275, 5, 0, 2 * Math.PI);

ctx.fill();


ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(MID, GROUND - 260, 20, 25.1, Math.PI); // smile
ctx.lineTo(MID - -20, GROUND - 260);
ctx.stroke();

ctx.fill(); // CHAMADA ADICIONADA!!!!! --------------------------------------------------------------

ctx.moveTo(MID - 50, GROUND - 160);
ctx.lineTo(MID - 140, GROUND - 160); // left arm
ctx.stroke();

ctx.moveTo(550,200);
ctx.lineTo(450,240); // RIGHT arm
ctx.stroke();

ctx.moveTo(MID - 50, GROUND - 300);
ctx.fillStyle = "red";
ctx.lineTo(MID + 50, GROUND - 300); // brim of hat
ctx.stroke();


ctx.fillRect(MID - 30, GROUND - 340, 60, 40);
<canvas id="myCanvas" width="800" height="600"></canvas> 

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .