Как увеличить / уменьшить размер этой формы сердца на холсте? - PullRequest
Новая
       5

Как увеличить / уменьшить размер этой формы сердца на холсте?

0 голосов
/ 15 января 2019

Я хочу нарисовать форму сердца в HTML 5 холст. Я знаю математическое уравнение, которое генерирует координаты в форме сердца. Я реализовал эти уравнения в функции JavaScript, и эта функция возвращает координаты. Все работает правильно, и сердце нарисовано на холсте. Но размер формы сердца фиксирован. Я пробовал много вещей, чтобы увеличить его размер, но ни одна из них не работает. Можете ли вы помочь мне изменить что-то в уравнении, чтобы получить желаемый размер?

Вот уравнения: -

х = 16 грех (т) * грех (т) * грех (т)

y = 13 cos (т) - 5 cos (2т) - 2 cos (3т) - cos (4т)

Я не знаю, как показать силу в этом редакторе, поэтому я умножил грех (t) в три раза.

Вот функция JavaScript: - 

function getCordinatesOnHeartShape(x, y) {
    var cordinates = [];
    var pi = Math.PI;
    for(var t = 0; t <= 360; t++) {
        var tr = (t * pi)/180;
        cordinates[t] = {
            x : (x - (16 * Math.sin(tr) * Math.sin(tr) * Math.sin(tr))),
            y : (y -((13 * Math.cos(tr)) - (5 * Math.cos(2 * tr)) - (2 * Math.cos(3 * tr)) - Math.cos(4 * tr)))
        };
    }
    return cordinates;
}

Вот как я нарисовал сердце на холсте в позиции (200, 200): - 

ctx.beginPath();
var hc = getCordinatesOnHeartShape(200, 200);
for(var i = 0; i < hc.length; i++) {
    ctx.lineTo(hc[i].x, hc[i].y);
}
ctx.fill();

Это нарисует сердце фиксированного размера на позиции (200, 200), и я хочу изменить его размер. Спасибо.

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Вы можете сделать это, используя функции Canvas ctx.save(), ctx.restore() и ctx.translate().

вот полный код.

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

let canvas = document.getElementById('c');
let canvasWidth = canvas.width;
let canvasHeight = canvas.height;
let ctx = canvas.getContext('2d');

function getCordinatesOnHeartShape(x, y) {
  var cordinates = [];
  var pi = Math.PI;
  for (var t = 0; t <= 360; t++) {
    var tr = (t * pi) / 180;
    cordinates[t] = {
      x: (x - (16 * Math.sin(tr) * Math.sin(tr) * Math.sin(tr))),
      y: (y - ((13 * Math.cos(tr)) - (5 * Math.cos(2 * tr)) - (2 * Math.cos(3 * tr)) - Math.cos(4 * tr)))
    };
  }

  return cordinates;
}

let size = 1;
let a = 0;

let x = 100;
let y = 100;

function animate() {
  a += 0.05;
  ctx.fillStyle = 'black';
  ctx.fillRect(-canvasWidth / 2, -canvasHeight / 2, canvasWidth, canvasHeight);

  size = 2 - Math.cos(a);
  ctx.resetTransform();
  ctx.translate(x, y);

  ctx.save();
  ctx.beginPath();
  ctx.fillStyle = 'red';
  var hc = getCordinatesOnHeartShape(x, y);
  ctx.translate(-size * x, -size * y);
  ctx.scale(size, size);
  for (var i = 0; i < hc.length; i++) {
    ctx.lineTo(hc[i].x, hc[i].y);
  }
  ctx.fill();
  ctx.restore();


  requestAnimationFrame(animate);
}
animate();
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Heart</title>
</head>

<body>

  <canvas id="c" width="200" height="200"></canvas>

</body>

</html>
0 голосов
/ 15 января 2019

Я сделал несколько изменений в вашей формуле. Теперь вы можете изменить значение r, чтобы изменить размер вашего сердца. 

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = 300),
    cx = cw / 2;
let ch = (canvas.height = 300),
    cy = ch / 2;

//////////////////
let r = 5; // change this!
/////////////////

function getCordinatesOnHeartShape(x, y) {
  var cordinates = [];
  var pi = Math.PI;
  for (var t = 0; t <= 360; t++) {
    var tr = t * pi / 180;
    cordinates[t] = {
      x: x - 16 * r * Math.sin(tr) * Math.sin(tr) * Math.sin(tr),
      y:
      y -
      (13 * r * Math.cos(tr) -
       5 * r * Math.cos(2 * tr) -
       2 * r * Math.cos(3 * tr) -
       r * Math.cos(4 * tr))
    };
  }
  return cordinates;
}

ctx.beginPath();
var hc = getCordinatesOnHeartShape(200, 200);
for (var i = 0; i < hc.length; i++) {
  ctx.lineTo(hc[i].x, hc[i].y);
}
ctx.fill();
canvas {
  border:1px solid}
<canvas id="canvas"></canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...