canvas 绘制圆综合示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas»æÖÆ»¡ÏßÈëÃÅʾÀý</title>
</head>
<body>

<canvas id="myCanvas" width="400px" height="300px" style="position:absolute;border: 1px solid red;">

</canvas>
<canvas id="myCanvas1" width="400px" height="300px" style="position:absolute;border: 1px solid red;">

<script type="text/javascript">

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); 

var alphaCanvas= document.getElementById("myCanvas1");
var alphaCtx = alphaCanvas.getContext("2d"); 
if(canvas.getContext){  
  

}
    var circle = {
        x : 100,    
        y : 100,   
        r : 0      
    };

    var originCircle = {
        x : 100,    
        y : 100,    
        r : 30      
    };
    var sizeAnimateDeltTime = 60;// 
    function drawCircle(ctx,circle){
        
        ctx.shadowColor = "red";
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = 10;
        
        
        ctx.beginPath();
        ctx.strokeStyle = "red";
        ctx.lineWidth = 4;
        //ctx.fillStyle = "rgba(255,0,0,0.25)";
        ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);  
        ctx.stroke();
        //ctx.fill();    
    }
    
    window.onload = function(){
        drawAnimateSizeCircle();
    }

    function drawAnimateSizeCircle(){
        setTimeout(animateSizeCircle,sizeAnimateDeltTime);
    }

    function animateSizeCircle(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        if(circle.r >= 30){
            circle.r = 0;
            drawCircle(alphaCtx,originCircle);
            drawAnimateAlphaCircle();
        }
            circle.r += 1;
            drawCircle(ctx,circle);
            drawAnimateSizeCircle();
    }

    function drawAnimateAlphaCircle(){
        setTimeout(animateAlphaCircle,40);
    }
    var factor = 1;
    function animateAlphaCircle(){
        alphaCtx.clearRect(0,0,canvas.width,canvas.height);
        factor -= 0.05;
            
        alphaCtx.globalAlpha = factor ;
        drawCircle(alphaCtx,originCircle);
        if(factor == 0 ){
            factor = 1;    
            alphaCtx.globalAlpha = factor;
        }else{
            drawAnimateAlphaCircle();
        }
    }
</script>
</body>
</html>
posted @ 2015-11-17 22:14  倾其一生  阅读(162)  评论(0)    收藏  举报