demo地址:http://www.free361.com/demo.php?id=2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>笛卡尔心</title>
<style>
body{padding:0;margin:0;overflow: hidden;}
#cas{display: block;}
img{width:0;height:0; display:none;}
</style>
<script>
window.addEventListener("load",eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasApp(){
var theCanvas = document.getElementById("cas");
var context = theCanvas.getContext("2d"); //2d上下文对象
context.fillStyle = "red";
var points = [];
drawScreen();
function drawScreen(){
for(var c=0;c<=360;c++){
points.push(getXY2(c));
}
}
var current_point;
var point_index = 0;
function drawStep(){
var point = points[point_index];
var x = point.x+250;
var y = point.y+150;
context.beginPath();
if(current_point != undefined){
var pre_x = current_point.x+250;
var pre_y = current_point.y+150;
context.moveTo(pre_x,pre_y);
}
context.lineTo(x,y);
context.stroke();
context.closePath();
if(point_index == 360){
context.beginPath();
for(var i = 0;i<points.length;i++){
x = points[i].x+250;
y = points[i].y+150;
context.lineTo(x,y);
}
context.stroke();
context.closePath();
context.clearRect(0,0,500,300);
context.fill();
}else{
point_index++;
current_point = point;
requestAnimationFrame(drawStep);
}
}
requestAnimationFrame(drawStep);
//笛卡尔心
function getXY(c){
var h = c*2*Math.PI/360;
var r = Math.acos(Math.sin(h));
r = r*30;
var y = -r*Math.sin(h);
var x = r*Math.cos(h);
return {"x":x,"y":y};
}
//扩展笛卡尔心
function getXY2(c){
var h = c*2*Math.PI/360;
var r = 15/Math.sqrt(17 - 16*Math.sin(h)*Math.abs(Math.cos(h)));
r = r*20;
var y = -r*Math.sin(h);
var x = r*Math.cos(h);
return {"x":x,"y":y};
}
}
</script>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;" >
<canvas id='cas' width="500" height="300" style=" border:1px solid black;" >浏览器不支持canvas</canvas>
</div>
<img src="/count/images/5star.png">
</body>
</html>