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