心形線,是一個圓上的固定一點在它繞著與其相切且半徑相同的另外一個圓周滾動時所形成的軌跡,因其形狀像心形而得名。心臟線亦為蚶線的一種。在曼德博集合正中間的圖形便是一個心臟線。
工具/原料
canvas
方法/步驟
您的瀏覽器不支持canvas!
var cr = document.getElementById("cardioid");
var W = cr.width/2, H = cr.height/3, R = 150;
var c = cr.getContext("2d");
var G = 360, g = 0, T = Math.PI*2, t = T/G;
c.save();
c.translate(W, H);
c.rotate(-T/4);
//c.fillStyle = "red";
while(g < G){
c.save();//c.translate(W, H);
c.rotate(g*t);
c.beginPath();
c.arc(0, -R*(1-Math.sin(++g*t)), 13, 0, 360, false);
c.closePath();
c.fill();
c.restore();
}
c.restore();
g = 0;
(function draw(){
if(g < G){
c.save();
c.translate(W, H);
c.rotate(-T/4 + g*t);
c.fillStyle = "red";
c.beginPath();
c.arc(0, -R*(1-Math.sin(++g*t)), 5, 0, 360, false);
c.closePath();
c.fill();
c.restore();
}
setTimeout(draw, 1);
})();
var $id = function(n) {
return document.getElementById(n) n;
}
window.addEventListener("load", draw, false);
var con = $id("pad").getContext('2d');
con.fillStyle = '#e21f27'
con.translate(200, 100);
function draw() {
var r = 0,
a = 100,
start = 0,
end = 0;
con.rotate(Math.PI);
for (var q = 0; q < 500; q++) {
start += Math.PI * 2 / 500;
end = start + Math.PI * 2 / 500;
r = a * (1 - Math.sin(start)); //心形極座標表示法
con.arc(0, 0, r, start, end, false);
}
con.fill();
}
var $id = function(n) {
return document.getElementById(n) n;
}
window.addEventListener("load", draw, false);
var con = $id("pad").getContext('2d');
con.fillStyle = '#e21f27'
con.translate(100, 100);
function draw() {
var r = 0,
a = 20,
start = 0,
end = 0;
con.rotate(Math.PI);
for (var q = 0; q < 1000; q++) {
start += Math.PI * 2 / 1000;
end = start + Math.PI * 2 / 1000;
r = a * Math.sqrt(225 / (17 - 16 * Math.sin(start) * Math.sqrt(Math.cos(start) * Math.cos(start))))
con.arc(0, 0, r, start, end, false);
}
con.fill();
}