JavaScrip 用Canvas绘制爱心的几种方式

最新推荐文章于 2024-07-27 21:40:29 发布

福州司马懿

最新推荐文章于 2024-07-27 21:40:29 发布

阅读量2.7k

点赞数

分类专栏： JavaScript

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/85275704

版权

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

心形公式参考：
https://www.cnblogs.com/sunshine21/p/7757958.html
https://blog.csdn.net/robert_chen1988/article/details/53123462
https://blog.csdn.net/stereohomology/article/details/51581391
https://blog.csdn.net/Decting/article/details/8580634

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

笛卡尔心形线
极坐标方程：r=a(1-sint)
参数方程： x=r(2sint-sin2t)
y=r(2cost-cos2t)

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

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

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

桃心型（最像爱心）
x=16sint^3
y=13cost−5cos2t−2cos3t−cos4t

(x^2+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)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<style>
body {
	margin: 0;
}
</style>
<script>
/*
https://www.cnblogs.com/sunshine21/p/7757958.html
https://blog.csdn.net/robert_chen1988/article/details/53123462

https://blog.csdn.net/stereohomology/article/details/51581391
https://blog.csdn.net/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)
*/
</script>
</head>
<body>
<canvas>
</canvas>
<script>

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();
}
</script>
</body>
</html>

在这里插入图片描述