圆周运动的Canvas实现-优快云博客

本文链接：https://blog.youkuaiyun.com/u011478276/article/details/53812190
demo地址 http://www.free361.com/demo.php?id=3
<!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上下文对象
    
    var arc = {"x":250,"y":150,"r":50};        //中心圆
    var arc2 = {"x":350,"y":150,"r":50};    //运动中的圆
    var point = {"x":300,"y":150};            //两个圆的切点
    var point2 = {"x":300,"y":150};            //初始相交那个点
    var current_angle = 0;
    var w = theCanvas.width;
    var h = theCanvas.height;
    
    drawBackground();
    
    function drawBackground(){
        context.clearRect(0,0,500,300);
        var x = arc.x;
        var y = arc.y;
        var r = arc.r;
        
        context.beginPath();
        
        context.strokeStyle = "rgba(0,0,0,1)";
        context.arc(x,y,r,0,2*Math.PI,false);
        context.stroke();
        
        context.strokeStyle = "rgba(0,0,0,0.2)";
        context.moveTo(0,y);
        context.lineTo(w,y);
        
        context.moveTo(x,0);
        context.lineTo(x,h);
        context.stroke();
        
        context.closePath();
    }
    
    function drawArc(){
        point = calcPoint();
        
        drawPoint();
        
        var x = arc2.x;
        var y = arc2.y;
        var r = arc2.r;
        
        var _r = getRadomColor();
        var _g = getRadomColor();
        var _b = getRadomColor();
        
        context.strokeStyle = "rgba("+_r+","+_g+","+_b+",0.6)";
//        context.strokeStyle = "rgba(0,0,0,0.6)";
        
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI,false);
        context.stroke();
        context.closePath();
        
        
    }
    
    function drawLine(){
        //计算原始相交点的位置
        var new_point = calcStartPoint();
        
        context.beginPath();
        
        context.moveTo(arc2.x,arc2.y);
        context.lineTo(new_point.x,new_point.y);
        
        context.stroke();
        context.closePath();
        
        
        context.fillStyle = "green";
        context.beginPath();
        context.arc(new_point.x,new_point.y,2,0,2*Math.PI,false);
        context.fill();
        context.closePath();
    }
    function calcStartPoint(){
        var x = arc.x;
        var y = arc.y;
        var r = arc.r;
        var x1 = point.x;        //新切点坐标
        var y1 = point.y;
        var x2 = point2.x;        //旧切点坐标
        var y2 = point2.y;
        
        var h = current_angle*Math.PI*r/180;    //弧长
        
        var a2 = h*180/arc2.r/Math.PI;    //第二个圆的夹角
        
        if(arc2.x<x1){
            var b2 = Math.atan((arc2.y-y1)/(x1-arc2.x))*180/Math.PI;
            var c2 = 180-(180-a2)/2-b2;
            var k = Math.sqrt(arc2.r*arc2.r*2-2*arc2.r*arc2.r*Math.cos(a2*Math.PI/180));
            var x3 = x1 + k * Math.cos(c2*Math.PI/180);
            var y3 = y1 + k * Math.sin(c2*Math.PI/180);
            
        }else{
            var b2 = Math.atan((arc2.y-y1)/(arc2.x-x1))*180/Math.PI;
            var c2 = (180-a2)/2-b2;
            var k = Math.sqrt(arc2.r*arc2.r*2-2*arc2.r*arc2.r*Math.cos(a2*Math.PI/180));
            var x3 = x1 + k * Math.cos(c2*Math.PI/180);
            var y3 = y1 - k * Math.sin(c2*Math.PI/180);
        }
        
        return {"x":x3,"y":y3};
    }
    function getRadomColor(){
        return Math.ceil(Math.random()*255);
    }
    //计算两个圆的切点
    function calcPoint(){
        var x1 = arc.x;
        var y1 = arc.y;
        var r1 = arc.r;
        var x2 = arc2.x;
        var y2 = arc2.y;
        var r2 = arc2.r;
        
        var _x = r1*(x2-x1)/(r1+r2);
        
        var x = _x+x1;
        
        var _y = Math.sqrt(r1*r1-_x*_x);
        
        if(y1>y2){
            var y = y1-_y;
        }else{
            var y = y1+_y;
        }
        
//        console.log(x,y,y2-y1);
        return {"x":x,"y":y};
    }
    //计算初始点
    function calcPoint2(){
        var angle = 180+current_angle;
        if(angle>360){
            angle = 0;
        }
        
        var x1 = arc.x;
        var y1 = arc.y;
        var r1 = arc.r;
        var x2 = arc2.x;
        var y2 = arc2.y;
        var r2 = arc2.r;
        
        var _x = r1*(x2-x1)/(r1+r2);
        
        var x = _x+x1;
        
        var _y = Math.sqrt(r1*r1-_x*_x);
        
        if(y1>y2){
            var y = y1-_y;
        }else{
            var y = y1+_y;
        }
        
//        console.log(x,y,y2-y1);
        return {"x":x,"y":y};
    }
    
    function drawPoint(){
        context.fillStyle = "red";
        context.beginPath();
        context.arc(point.x,point.y,2,0,2*Math.PI,false);
        context.fill();
        context.closePath();
    }
    //计算第二个圆的圆心
    function calcArc2Center(angle){
        var hugle = angleToHugle(angle);
        var r = arc.r+arc2.r;
        var _x = r*Math.cos(hugle);
        var _y = r*Math.sin(hugle);
        
        var x = arc.x + _x;
        var y = arc.y + _y;
        
        return {"x":x,"y":y,"r":arc2.r};
    }
    function angleToHugle(a){
        var h = a*2*Math.PI/360;
        return h;
    }
    
    function drawStep(){
        
        if(current_angle>360){
            current_angle = 0;
//            context.clearRect(0,0,500,300);
        }
        
        arc2 = calcArc2Center(current_angle);
//        console.log(arc2);
        
        current_angle++;
        
        drawBackground();
        drawArc();
        
        drawLine();
        
        requestAnimationFrame(drawStep);
//        setTimeout(drawStep,500);
    }
//    setTimeout(drawStep,500);
    requestAnimationFrame(drawStep);
    
}
</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>