canvas 笛卡尔心

最新推荐文章于 2023-03-07 14:32:49 发布

free361

最新推荐文章于 2023-03-07 14:32:49 发布

阅读量527

点赞数

分类专栏： h5 文章标签： canvas

本文链接：https://blog.csdn.net/u011478276/article/details/53812044

版权

h5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

free361

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 笛卡尔心

demo地址：http://www.free361.com/demo.php?id=2笛卡尔心body{padding:0;margin:0;overflow: hidden;}#cas{display: block;}img{width:0;height:0; display:none;}window.addEventListener("load",e
复制链接

扫一扫

专栏目录