@anthon-help

Как на основе кода для рисования снеговика функцию drawSnowman, которая рисует снеговика в указанной позиции на холсте к примеру drawSnowman(0, 0 )?

Здравствуйте всем!
Есть код который рисует снеговика:
var drowSnowman = function() {
            function drawCircle(x, y, radius, fillCirсle) {
            ctx.beginPath();
            if (fillCirсle === true) {
                ctx.lineWidth = 4;
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                ctx.stroke();
            } else if (fillCirсle === false) {
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                ctx.fill();
            }
        };
        
        drawCircle(100, 100, 30, true);
        ctx.fillStyle = "orange";
        drawCircle(100, 105, 5, false);
        ctx.fillStyle = "black";
        drawCircle(90, 95, 5, false);
        drawCircle(110, 95, 5, false);
        drawCircle(100, 170, 40, true);
        drawCircle(100, 150, 5, false);
        drawCircle(100, 170, 5, false);
        drawCircle(100, 190, 5, false);
        };

        drowSnowman();


Как сделать так, чтобы при указании drowSnowman(100, 100) или drowSnowman(300, 0) снеговик появлялся на этих координатах. Ни как не могу додуматься.
  • Вопрос задан
  • 36 просмотров
Решения вопроса 2
delphinpro
@delphinpro
frontend developer
var drowSnowman = function(x, y) {
....
drawCircle(x+100, y+100, 30, true);
drawCircle(x+100, y+105, 5, false);
…// и т.д
Ответ написан
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
var drowSnowman = function(posX, posY) {
            function drawCircle(x, y, radius, fillCirсle) {
            ctx.beginPath();
            if (fillCirсle === true) {
                ctx.lineWidth = 4;
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                ctx.stroke();
            } else if (fillCirсle === false) {
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                ctx.fill();
            }
        };
        
        drawCircle(posX+100, posY+100, 30, true);
        ctx.fillStyle = "orange";
        drawCircle(posX+100, posY+105, 5, false);
        ctx.fillStyle = "black";
        drawCircle(posX+90, posY+95, 5, false);
        drawCircle(posX+110, posY+95, 5, false);
        drawCircle(posX+100, posY+170, 40, true);
        drawCircle(posX+100, posY+150, 5, false);
        drawCircle(posX+100, posY+170, 5, false);
        drawCircle(posX+100, posY+190, 5, false);
};

drowSnowman(200,150);
drowSnowman(500,450);
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
JamesHatfield
@JamesHatfield
Front-end developer
Как вариант так:

var drowSnowman = function(a, b) {
function drawCircle(x, y, radius, fillCirсle) {
ctx.beginPath();
if (fillCirсle === true) {
ctx.lineWidth = 4;
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.stroke();
} else if (fillCirсle === false) {
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.fill();
}
};

drawCircle(a, b, 30, true);
ctx.fillStyle = "orange";
drawCircle(a, b+5, 5, false);
ctx.fillStyle = "black";
drawCircle(a-10, b-5, 5, false);
drawCircle(a+10, b-5, 5, false);
drawCircle(a, b+70, 40, true);
drawCircle(a, b+50, 5, false);
drawCircle(a, b+70, 5, false);
drawCircle(a, b+90, 5, false);
};

drowSnowman(100,100);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы