иллюстрировать
Я написал эту статью, потому что однажды увидел такую формулуr=a(1-cosθ), порылся в интернете, оказалось уравнение полярных координат декартовой линии сердцевидной.В этом уравнении действительно есть романтическое и трагическое уравнение.история о любви, заинтересованные друзья могут нажатьздесьСмотрите, и неважно, правдива эта история или нет.
Цель этой статьи — использовать интерфейсный метод для рисования декартовой линии в форме сердца. Изначально я думал, такая классическая формула, кто-то уже должен был реализовать ее в Интернете. Я искал и должен был восхищаться пользователями сети,реализовано на Java,Реализовано на С#,Существуют также реализации холста,Но также с эхартами живопись, может научиться учиться.
Хорошо, давайте начнем текст! Давайте сначала разберемся с линией в форме сердца
Линия в форме сердца — это траектория, образованная неподвижной точкой на окружности, когда она катится по другой касательной к ней окружности, имеющей такой же радиус, и названа так из-за своей формы, похожей на сердце.
Поскольку холст — это прямоугольная система координат, поэтому сначала рассмотрим ее.
Чертеж плоской декартовой системы координат
Первый пост найденное в интернете уравнение выражения плоской прямоугольной системы координат сердцевидной линии
соответственноx^2+y^2+a*x=a*sqrt(x^2+y^2)а такжеx^2+y^2-a*x=a*sqrt(x^2+y^2
Почему существует два выражения уравнения? Поскольку выражения уравнения, соответствующие горизонтальному и вертикальному направлениям линии в форме сердца, различны, линия в форме сердца, нарисованная с помощью одного и того же выражения уравнения, изменит направление, заменив координаты x и y каждой точки. выражения.
Хорошо, давайте начнем рисовать, посмотрите на этодругспособ сделать
идеи
Получите координаты всех точек в соответствии с выражением уравнения, затем соедините каждую точку, затем заполните и, наконец, сделайте форму сердца.
параметрическое уравнение
x=a*(2*sin(t)+sin(2*t))
y=a*(2*cos(t)+cos(2*t))
x，yпредставляют координату x и координату y точки соответственно,
a: константа, используемая для управления размером формы сердца,
t: представляет радианы
tДиапазон значений:-pi<=t<=pi 或 0<=t<=2*pi
код
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas width="400" height="400"></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 3;
// 将画布的原点（0,0），移动到(200,200)
// 移动原点是为了能让整个心形显示出来
context.translate(200,200);
// t 代表弧度
var t=0;
// maxt 代表 t 的最大值
var maxt = 2*Math.PI;
// vt 代表 t 的增量
var vt = 0.01;
// 需要循环的次数
var maxi = Math.ceil(maxt/vt);
// 保存所有点的坐标的数组
var pointArr=[];
// x 用来暂时保存每次循环得到的 x 坐标
var x=0;
// y 用来暂时保存每次循环得到的 y 坐标
var y=0;
// 根据方程得到所有点的坐标
for(var i=0;i<=maxi;i++){
// x=a*(2*sin(t)+sin(2*t))
x=50*(2*Math.sin(t)+Math.sin(2*t));
// y=a*(2*cos(t)+cos(2*t))
y=50*(2*Math.cos(t)+Math.cos(2*t));
t+=vt;
pointArr.push([x,y]);
}
// 根据点的坐标，画出心形线
context.moveTo(pointArr[0][0],pointArr[0][1]);
draw();
function draw(){
context.fillStyle='#c00';
// 把每个点连接起来
for(var i=1;i<pointArr.length;i++){
x = pointArr[i][0];
y = pointArr[i][1];
context.lineTo(x,y);
}
context.fill();
}
</script>
</body>
</html>
визуализация
Метод рисования плоской прямоугольной системы координат (форма полого сердца)
Приведенный выше код нарисован сплошной формой сердца.Конечно, мы можем нарисовать пустоту, просто нужно внести небольшие изменения.
Нам просто нужно изменить функцию draw() и поместить исходнуюfill( )метод, изменить наstroke( )метод иstrokeStyleПросто установите цвет.
function draw(){
//context.fillStyle='#c00';
context.strokeStyle='#c00';
// 把每个点连接起来
for(var i=1;i<pointArr.length;i++){
x = pointArr[i][0];
y = pointArr[i][1];
context.lineTo(x,y);
}
//context.fill();
context.stroke();
}
полярная система координат
Система полярной координаты подобна этому
Положение точки в полярной системе координат определяется полюсом (точка О на рисунке) и углом.
Дополнительную информацию о полярной системе координат см.здесь
посмотри на этодругспособ сделать
идеи
Согласно уравнению в полярных координатахr=a(1+sinθ), получить r , взять r в качестве радиуса, непрерывно рисовать дуги в соответствии с r , и после рисования круга получается форма сердца.
Уравнение полярных координат кардиоидной линии
r=a(1+sinθ)
код
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas width="400" height="400"></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// 将画布的原点（0,0），移动到(200,100)
// 移动原点是为了能让整个心形显示出来
context.translate(200, 100);
// 画心形
draw();
function draw() {
// 画圆弧时，圆的半径
var r = 0;
// start 代表画弧线时的 起始角
var start = 0;
// end 代表画弧线时的 结束角
var end = 0;
// 一个常数，用来控制心形的大小
var a = 100;
context.fillStyle = '#e21f27';
//连续的画圆弧
for (var q = 0; q < 500; q++) {
start += Math.PI * 2 / 500;
// 当 结束角 是 Math.PI * 2 时也就是已经画了一圈了,心形就出来了
end = start + Math.PI * 2 / 500;
// 根据极坐标方程 r=a(1+sinθ)，得到 r（半径）
r = a * (1 + Math.sin(start));
// 画弧线
context.arc(0, 0, r, start, end, false);
}
context.fill();
}
</script>
</body>
</html>
визуализация
Метод рисования полярной системы координат (полое сердце)
Использование метода рисования в полярной системе координат для рисования формы полого сердца такое же, и функция draw() должна быть изменена, чтобы заменить оригинал.fill( )метод, изменить наstroke( )метод иstrokeStyleПросто установите цвет.
function draw() {
var r = 0;
var start = 0;
var end = 0;
var a = 100;
//context.fillStyle = '#e21f27';
context.strokeStyle = '#e21f27';
for (var i = 0; i < 500; i++) {
start += Math.PI * 2 / 500;
end = start + Math.PI * 2 / 500;
r = a * (1 + Math.sin(start));
context.arc(0, 0, r, start, end, false);
}
//context.fill();
// 改用 stroke() 方法
context.stroke();
}
Вы можете подумать, что такая форма сердца некрасива.
Проверьте это параметрическое уравнение!
x=16 * (sin(t)) ^ 3;
y=13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)。
Согласно этому параметрическому уравнению, используя метод рисования плоской прямоугольной системы координат, упомянутый выше, и изменив уравнение в коде, можно нарисовать такую форму сердца.
код
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas width="400" height="400"></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 3;
// 将画布的原点（0,0），移动到(200,200)
// 移动原点是为了能让整个心形显示出来
context.translate(200,200);
// t 代表弧度
var t=0;
// vt 代表 t 的增量
var vt = 0.01;
// maxt 代表 t 的最大值
var maxt = 2*Math.PI;
// 需要循环的次数
var maxi = Math.ceil(maxt/vt);
// 保存所有点的坐标的数组
var pointArr=[];
// 控制心形大小
var size = 10;
// x 用来暂时保存每次循环得到的 x 坐标
var x=0;
// y 用来暂时保存每次循环得到的 y 坐标
var y=0;
// 根据方程得到所有点的坐标
for(var i=0;i<=maxi;i++){
// x=16 * (sin(t)) ^ 3;
var x = 16 * Math.pow(Math.sin(t),3);
// y=13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)
var y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) -2 * Math.cos(3 * t)- Math.cos(4 * t);
t+=vt;
pointArr.push([x*size,-y*size]);
}
// 根据点的坐标，画出心形线
context.moveTo(pointArr[0][0],pointArr[0][1]);
draw();
function draw(){
context.fillStyle='#c00';
// 把每个点连接起来
for(var i=1;i<pointArr.length;i++){
x = pointArr[i][0];
y = pointArr[i][1];
context.lineTo(x,y);
}
context.fill();
}
</script>
</body>
</html>
Может быть, мы можем сделать что-то еще, например добавить анимацию, см.последующийБар.
Суммировать
В этой статье в основном говорится о рисовании сердец с использованием уравнения декартовой кардиоидной линии, но способ рисования сердца определенноРазличныйда, простоВы также можете использовать CSS, сложныйТакже можно рисовать с помощью кривых Безье., можно попробовать, может что-то новое откроется.