如何在画布中增加/减小这种心形的大小?

时间:2019-01-15 11:43:28

标签: javascript html5 math canvas html5-canvas

我想在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)上绘制固定大小的心脏,我想更改其大小。谢谢。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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