首先找了一個心形線公式：
x=12*sin(t)-4*sin(3*t)
y=13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t)
代碼如下：
function heart() {
? ? ? ? const c = document.getElementById("myCanvas");
? ? ? ? const ctx = c.getContext("2d");
? ? ? ? //設(shè)置初始弧度
? ? ? ? let radian = 0;
? ? ? ? //設(shè)置弧度增量曲饱，每次增加1°
? ? ? ? let radian_add = Math.PI / 180;
? ? ? ? //開始繪圖
? ? ? ? ctx.beginPath();
? ? ? ? // 重新映射畫布上的 (0,0) 位置
? ? ? ? ctx.translate(250, 200);
? ? ? ? // 設(shè)置繪制起點
? ? ? ? ctx.moveTo(getX(radian), getY(radian));
? ? ? ? // 弧度小于等于360°
? ? ? ? while (radian <= Math.PI * 2) {
? ? ? ? ? //每增加一次弧度，繪制一條線
? ? ? ? ? radian += radian_add;
? ? ? ? ? X = getX(radian);
? ? ? ? ? Y = getY(radian);
? ? ? ? ? ctx.lineTo(X, Y);
? ? ? ? }
? ? ? ? ctx.strokeStyle = "red";
? ? ? ? ctx.stroke();
}
//獲取心型線的X坐標捣染，放大15倍
function getX(t) {
? ? ? ? return 15 * (12 * Math.sin(t) - 4 * Math.sin(3 * t));
}
//獲取心型線的Y坐標把兔，放大15倍
function getY(t) {
? ? ? ? return (
? ? ? ? ? -15 *
? ? ? ? ? (13 * Math.cos(t) -
? ? ? ? ? ? 5 * Math.cos(2 * t) -
? ? ? ? ? ? 2 * Math.cos(3 * t) -
? ? ? ? ? ? Math.cos(4 * t))
? ? ? ? );
}
實現(xiàn)效果如下蟀伸，可在線查看效果
