如何在画布中增加/减少这个心形的大小？
[英]How to increase/decrease size of this heart shape in canvas?
问题描述
I want to draw heart shape in html 5 canvas.
我想在 html 5 画布中绘制心形。 I know a mathematical equation that generates coordinates on heart shape.我知道一个数学方程可以生成心形坐标。 I have implemented those equations in javascript function and that functions is returning coordinates.我已经在 javascript 函数中实现了这些方程，并且该函数正在返回坐标。 Everything is working properly and heart is drawn on canvas.一切正常，心被画在画布上。 But heart shape size is fixed.但心形大小是固定的。 I have tried many things to increase its size but none of them work.我尝试了很多方法来增加它的大小，但都没有奏效。 Can you help me in changing something in equation to get desired size?你能帮我改变方程式中的东西以获得所需的尺寸吗？
Here is equations:-这是方程：-
x = 16 sin(t) * sin(t) * sin(t) x = 16 sin(t) * sin(t) * sin(t)
y = 13 cos(t) - 5 cos(2t) - 2 cos(3t) - cos(4t) y = 13 cos(t) - 5 cos(2t) - 2 cos(3t) - cos(4t)
I don't know how to show power in this editor so i multiplied sin(t) three times.我不知道如何在这个编辑器中展示力量，所以我将 sin(t) 乘以三倍。
Here is javascript function:-这是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;
}
Here is how i drawn heart on canvas at position (200, 200):-这是我在画布上的位置 (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();
This draw a fixed size heart on position (200, 200) and i want change it's size.这会在位置 (200, 200) 上绘制一个固定大小的心形，我想改变它的大小。 Thanks.谢谢。
2 个解决方案
解决方案1
1 2019-01-15 12:07:28
You can do it by using Canvas ctx.save() , ctx.restore() and ctx.translate() functions.您可以使用 Canvas 的ctx.save() 、 ctx.restore()和ctx.translate()函数来实现。
here is the full code.这是完整的代码。
i hope this helps you.我希望这可以帮助你。
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>
解决方案2
0 已采纳 2019-01-15 11:55:48
I've made a few changes to your formula.我对您的公式进行了一些更改。 Now you can change the value of r to change the size of your heart.现在你可以改变 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.