html使用CANVAS画心形图形,JavaScrip 用Canvas绘制爱心的几种方式-优快云博客

下面简单的收录了几种常见的心形公式，其中极坐标和参数方程的形式最有利于绘制。直角坐标系的方程绘制方式就稍微麻烦了点，需要分段绘制。

笛卡尔心形线

极坐标方程：r=a(1-sint)

参数方程：x=r(2sint-sin2t)

y=r(2cost-cos2t)

x2+(y−(x2)(1/3))2=9

y=±sqrt(9-x2)+(x2)^(1/3)

-x2*y3+(x2+y2-1)^3=0

17*x2-16*|x|*y+17*y2=200

桃心型(最像爱心)

x=16sint^3

y=13cost−5cos2t−2cos3t−cos4t

(x2+y2-1)3=x2*y^3

x=±0.01*(-t^2+40t+1200)sin(PIt/180)

x=0.01(-t^2+40*t+1200)cos(PIt/180)

(0<=t<=60)

body {

margin: 0;

}

https://www.cnblogs.com/sunshine21/p/7757958.html

https://blog.youkuaiyun.com/robert_chen1988/article/details/53123462

https://blog.youkuaiyun.com/stereohomology/article/details/51581391

https://blog.youkuaiyun.com/Decting/article/details/8580634

1.笛卡尔心形线

极坐标方程：r=a(1-sint)

参数方程：x=r(2*sint-sin2t)

y=r(2*cost-cos2t)

2.1

x^2+(y−(x^2)^(1/3))^2=9

y=±sqrt(9-x^2)+(x^2)^(1/3)

2.2

-x^2*y^3+(x^2+y^2-1)^3=0

2.3

17*x^2-16*|x|*y+17*y^2=200

2.4 桃心型

x=16*sint^3

y=13*cost−5*cos2t−2*cos3t−cos4t

2.5

(x^2+y^2-1)^3=x^2*y^3

2.6

x=±0.01*(-t^2+40*t+1200)*sin(PI*t/180)

x=0.01*(-t^2+40*t+1200)*cos(PI*t/180)

(0<=t<=60)

class Heart {

constructor(canvas, x, y, a) {

this.ctx = canvas.getContext('2d');

this.x = x;

this.y = y;

this.a = a;

}

draw() {

const delta = 20;

console.log(delta, -delta)

this.stroke(1, "red", -delta,delta);

this.stroke(2, "green", delta,delta);

this.stroke(3, "blue", -delta,-delta);

this.stroke(4, "yellow", delta,-delta);

}

stroke(type, color, dx, dy) {

this.ctx.strokeStyle = color;

this.ctx.lineWidth = 1;

this.ctx.beginPath();

this.ctx.save();

//这里一定要先平移再旋转

this.ctx.translate(this.x+dx,this.y+dy);

//绘制的坐标系是从左上角到右下角

this.ctx.rotate(Math.PI);

console.log(this.x, this.y, dx, dy, "=", this.x+dy,this.y+dy);

//eval函数可以实现类似高级语言的反射效果

eval("this.shape"+type+"()");

this.ctx.stroke();

this.ctx.restore();

}

shape1() {

const part = 2 * Math.PI / 500;

//这里用的是笛卡尔坐标系的极坐标方程

let start = 0;

for(let i=0; i<500; i++) {

start += part;

const end = start + part;

//这里如果将start*2就变成斜8字了，乘3就变成3叶草

const r = this.a * (1 - Math.sin(start));

this.ctx.arc(0, 0, r, start, end, false);

}

this.ctx.stroke();

this.ctx.beginPath();

this.ctx.translate(20, 20);

for(let i=0; i<500; i++) {

start += part;

const end = start + part;

//这里如果将start*2就变成斜8字了，乘3就变成3叶草

const r = this.a * (1 - Math.sin(start*8));

this.ctx.arc(0, 0, r, start, end, false);

}

shape2() {

const part = 2 * Math.PI / 500;

let t = 0;

for(let i=0; i<500; i++) {

t += part;

const x=16*Math.pow(Math.sin(t), 3);

const y=13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t)

this.ctx.lineTo(x,y);

}

shape3() {

const r = 0.01;

const arr = [];

for(let t=0; t<=60; t+=0.5) {

const x = 0.01*(-Math.pow(t,2)+40*t+1200)*Math.sin(Math.PI*t/180);

const y = 0.01*(-Math.pow(t,2)+40*t+1200)*Math.cos(Math.PI*t/180);

this.ctx.lineTo(x, y)

arr.push(-x,y);

}

for(let i=arr.length-1;i>0;i-=2) {

this.ctx.lineTo(arr[i-1], arr[i]);

}

shape4() {

const a = 5;

const arr = [];

for(let x=-3; x<=3; x+=0.05) {

const y1=Math.sqrt(9-Math.pow(x,2))+(Math.pow(Math.pow(x,2), 1/3));

const y2=-Math.sqrt(9-Math.pow(x,2))+(Math.pow(Math.pow(x,2), 1/3));

this.ctx.lineTo(a*x, a*y1)

arr.push(a*x,a*y2);

}

for(let i=arr.length-1;i>0;i-=2) {

this.ctx.lineTo(arr[i-1], arr[i]);

}

lineTo(x, y) {

requestAnimationFrame = ()=>{

this.ctx.lineTo(x, y);

this.ctx.stroke();

}

const canvas = document.querySelector('canvas');

canvas.width = canvas.parentNode.clientWidth;

canvas.height = document.documentElement.clientHeight;

const ctx = canvas.getContext("2d");

canvas.onmousedown = (e)=>{

const x = e.offsetX;

const y = e.offsetY;

const a = 10;

const heart = new Heart(e.target, x, y, a);

heart.draw();

}