如何在画布中增加/减小这个心形的大小？答案

【问题标题】：How to increase/decrease size of this heart shape in canvas?如何在画布中增加/减小这个心形的大小？
【发布时间】：2019-06-09 10:10:49
【问题描述】：

我想在 html 5 画布中绘制心形。我知道一个在心形上生成坐标的数学方程。我已经在 javascript 函数中实现了这些方程，并且这些函数正在返回坐标。一切正常，心画在画布上。但心形大小是固定的。我尝试了很多方法来增加它的大小，但都没有奏效。你能帮我改变方程式中的某些东西以获得所需的大小吗？

这是方程式：-

x = 16 sin(t) * sin(t) * sin(t)

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

我不知道如何在这个编辑器中显示力量，所以我将 sin(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) 上绘制一个固定大小的心，我想改变它的大小。谢谢。

【问题讨论】：

标签： javascript html math canvas html5-canvas

【解决方案1】：

我对您的公式进行了一些更改。现在你可以改变 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}

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

您可以使用 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>

【讨论】：

谢谢，但我不想制作动画。对于大小的增加/减少，@enxaneta 的解决方案更容易。再次感谢，它给了我更多的想法来创造真棒。
是的，我完全理解并同意@enxaneta 的解决方案。继续努力。