Вопрос по canvas, html5, javascript – Как мне продублировать фигуру на холсте HTML5?

3

У меня есть полусложная и горизонтально симметричная форма, которую я пытаюсь построить, используя HTML5. Пока я пытался закончить, я понял, что было бы проще, если бы я мог просто дублировать половину фигуры, отразить ее и переместить, чтобы соединить два изображения вместе. Я нахожу примеры того, как отразить и переместить фигуру, но не о том, как ее дублировать.

Очевидно, я надеюсь, что мне не понадобятся два отдельных элемента canvas.

Вот мой код для справки:

var canvas = document.getElementById(id),
      context = canvas.getContext("2d"),
      color,
      height = 50;
      width = 564;
      arrowWidth = 40,
      arrowHeight = 15,
      arrowStart = height - arrowHeight,
      edgeCurveWidth = 50;

    if (parseInt(id.substr(-1), 10) % 2) {
      color = "#F7E5A5";
    } else {
      color = "#FFF";
    }

    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = "#BAAA72";
    context.moveTo(0, 0);
    context.quadraticCurveTo(-10, arrowStart, edgeCurveWidth, arrowStart);
    context.quadraticCurveTo(width/2 - arrowWidth/2 - 15, arrowStart - 15, width/2 - arrowWidth/2, arrowStart);
    context.quadraticCurveTo(width/2, height, width/2, height);
    context.stroke();
    context.lineTo(width/2, 0);
    context.closePath();
    context.fillStyle = color;
    context.fill();
Вы можете просто переместить свою фигуру в функцию, вызвать ее один раз, а затем использовать другое состояние (save, restore) добавить зеркальный эффект (используяtransform или жеscale+translate) и позвоните еще раз. Увидетьdeveloper.mozilla.org/en/Canvas_tutorial/Transformations Zeta
@ Аммар: я думал, что у меня не было достаточно времени для подробного ответа. Мне нравится проверять свои ответы, прежде чем я отправлю их и предоставлю небольшую демонстрацию. Zeta
@ Зета: Вы должны написать свое решение в качестве ответа. Ammar

Ваш Ответ

1   ответ
5

Вы можете просто переместить свою фигуру в функцию, вызвать ее один раз, а затем использовать другое состояние (save, restore) добавить зеркальный эффект (используяtransform или жеscale+translate) и позвоните еще раз:

function drawHalfShape(context,width, height,arrowWidth,arrowHeight,edgeCurveWidth,color){
    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = "#BAAA72";
    context.moveTo(0, 0);
    context.quadraticCurveTo(-10, arrowStart, edgeCurveWidth, arrowStart);
    context.quadraticCurveTo(width/2 - arrowWidth/2 - 15, arrowStart - 15, width/2 - arrowWidth/2, arrowStart);
    context.quadraticCurveTo(width/2, height, width/2, height);
    context.stroke();
    context.lineTo(width/2, 0);
    context.closePath();
    context.fillStyle = color;
    context.fill();
}

var canvas = document.getElementById(id),
      context = canvas.getContext("2d"),
      color,
      height = 50;
      width = 564;
      arrowWidth = 40,
      arrowHeight = 15,
      arrowStart = height - arrowHeight,
      edgeCurveWidth = 50;

    if (parseInt(id.substr(-1), 10) % 2) {
      color = "#F7E5A5";
    } else {
      color = "#FFF";
    }

drawHalfShape(context,width,height,arrowWidth,arrowHeight,edgeCurveWidth,color);

context.save();
context.translate(-width/2,0); // these operations aren't commutative
context.scale(-1,0);           // these values could be wrong
drawHalfShape(context,width,height,arrowWidth,arrowHeight,edgeCurveWidth,color);
context.restore();

УвидетьMDN: трансформации Например.

Error: User Rate Limit Exceeded Jeremy Smith

Похожие вопросы