HTML5 Canvas: как создать несколько фигур на одном холсте и позиционировать / стилизовать их независимо

Question

Я новичок в использовании холста HTML и надеюсь, что смогу создать кнопку, которая может быть преобразована и взаимодействовать с помощью холста. Но я изо всех сил пытаюсь нарисовать несколько составных частей и стилизовать / отрегулировать их независимо.

Для начала я ищу серый круг с контуром сердца в центре, почти заполняющий серый круг. Круг будет нарисован с помощью .arc, а контур сердца - svg path.

1) Как у меня на холсте несколько фигур, которыми я могу управлять независимо друг от друга? Я начал с создания нескольких контекстов одного и того же холста, верно? Например, circleContext и heartContext, чтобы я мог установить разные fill цвета и только для определенных контекстов. Это правильный подход?

2) Как мне расположить эти фигуры на холсте? Я настроил canvasCentreX и canvasCentreY с надеждой использовать эти координаты, чтобы установить фигуры там, где я хочу их, но я не могу правильно расположить path2D, используя .moveTo или любой другой доступный метод.

Вот что у меня есть:

https://codepen.io/anon/pen/xMZxvq

// Canvas setup
const canvas = document.getElementById('saveButtonCanvas');
const ctx = canvas.getContext('2d');
const canvasCentreX = canvas.width / 2;
const canvasCentreY = canvas.height / 2;

// Draw grey background circle
const circleContext  = canvas.getContext('2d');
const backgroundCircleRadius = canvas.width / 2;
circleContext.beginPath();
circleContext.arc(canvasCentreX, canvasCentreY, backgroundCircleRadius, 0, 2 * Math.PI);
circleContext.fillStyle = '#eee';
circleContext.fill();

// Draw outline of heart
const heartContext = canvas.getContext('2d');
heartContext.lineWidth = 2;
const heartOutline = new Path2D("M12.7047547,3.56374623e-06 C11.2594659,0.00100271425 9.94933816,0.599893524 8.99600456,1.56687138 C8.04033388,0.603290635 6.72923238,0.00779693764 5.28238554,0.00959540854 C2.36181543,0.0127926901 -0.00252980442,2.44652348 2.03149576e-06,5.44317565 C0.00837656568,12.3289212 9.01294838,16 9.01294838,16 C9.01294838,16 18.0097299,12.3067401 17.9999921,5.41919604 C17.9962917,2.42234403 15.6261038,-0.00339354795 12.7047547,3.56374623e-06 L12.7047547,3.56374623e-06 Z");
heartOutline.moveTo(canvasCentreX, canvasCentreY);
heartContext.stroke(heartOutline);

#saveButtonCanvas {
  height: 80px;
  width: 80px;
  margin:30px;
  cursor: pointer;
}

<canvas id="saveButtonCanvas" width="80" height="80"></canvas>

Answer 1

Вот это да, я бы сделал это: сначала мне нужен размер пути svg. Чтобы получить размер, вы можете нарисовать путь svg внутри элемента svg и использовать метод getBBox (). Этот метод возвращает объект с размером и координатами ограничительной рамки. Я использую ширину и высоту.

Вам нужно получить контекст только один раз.

Чтобы переместить сердце в центре вашего холста, я бы использовал translate

// Canvas setup
const canvas = document.getElementById('saveButtonCanvas');
const ctx = canvas.getContext('2d');
const canvasCentreX = canvas.width / 2;
const canvasCentreY = canvas.height / 2;

// Draw grey background circle
//const circleContext  = canvas.getContext('2d');
const backgroundCircleRadius = canvas.width / 2;
ctx.beginPath();
ctx.arc(canvasCentreX, canvasCentreY, backgroundCircleRadius, 0, 2 * Math.PI);
ctx.fillStyle = '#eee';
ctx.fill();

// Draw outline of heart
//const heartContext = canvas.getContext('2d');
ctx.lineWidth = 2;
const hw = 18;// width of the heart
const hh = 16;// height of the heart


ctx.save();
// translate the heart in the center of the canvas
ctx.translate(-hw/2, -hh/2);
ctx.translate(canvasCentreX,canvasCentreY);

const heartOutline = new Path2D("M12.7047547,3.56374623e-06 C11.2594659,0.00100271425 9.94933816,0.599893524 8.99600456,1.56687138 C8.04033388,0.603290635 6.72923238,0.00779693764 5.28238554,0.00959540854 C2.36181543,0.0127926901 -0.00252980442,2.44652348 2.03149576e-06,5.44317565 C0.00837656568,12.3289212 9.01294838,16 9.01294838,16 C9.01294838,16 18.0097299,12.3067401 17.9999921,5.41919604 C17.9962917,2.42234403 15.6261038,-0.00339354795 12.7047547,3.56374623e-06 L12.7047547,3.56374623e-06 Z");

ctx.stroke(heartOutline);
ctx.restore();

#saveButtonCanvas {
  height: 80px;
  width: 80px;
  margin:30px;
  cursor: pointer;
}

canvas{border:1px solid}

<canvas id="saveButtonCanvas" width="80" height="80"></canvas>

В случае, если вам нужно нарисовать большее сердце, я бы использовал шкалу:

// Canvas setup
const canvas = document.getElementById('saveButtonCanvas');
const ctx = canvas.getContext('2d');
const canvasCentreX = canvas.width / 2;
const canvasCentreY = canvas.height / 2;

// Draw grey background circle
//const circleContext  = canvas.getContext('2d');
const backgroundCircleRadius = canvas.width / 2;
ctx.beginPath();
ctx.arc(canvasCentreX, canvasCentreY, backgroundCircleRadius, 0, 2 * Math.PI);
ctx.fillStyle = '#eee';
ctx.fill();

// Draw outline of heart
//const heartContext = canvas.getContext('2d');
ctx.lineWidth = 1;
const hw = 18;// the width of the heart
const hh = 16;// the height of the heart

let scale = 3;// the scale for the heart

ctx.save();

ctx.translate(-scale*hw/2, -scale*hh/2);
ctx.translate(canvasCentreX,canvasCentreY);
ctx.scale(scale,scale)
const heartOutline = new Path2D("M12.7047547,3.56374623e-06 C11.2594659,0.00100271425 9.94933816,0.599893524 8.99600456,1.56687138 C8.04033388,0.603290635 6.72923238,0.00779693764 5.28238554,0.00959540854 C2.36181543,0.0127926901 -0.00252980442,2.44652348 2.03149576e-06,5.44317565 C0.00837656568,12.3289212 9.01294838,16 9.01294838,16 C9.01294838,16 18.0097299,12.3067401 17.9999921,5.41919604 C17.9962917,2.42234403 15.6261038,-0.00339354795 12.7047547,3.56374623e-06 L12.7047547,3.56374623e-06 Z");

ctx.stroke(heartOutline);

ctx.restore();

#saveButtonCanvas {
  height: 80px;
  width: 80px;
  margin:30px;
  cursor: pointer;
}

canvas{border:1px solid}

<canvas id="saveButtonCanvas" width="80" height="80"></canvas>

Надеюсь, это поможет.