HTML5 Canvas Shadow

不支援Canvas。


     <canvas style="background-color:#000000" id="myCanvas201312010535" width="400" height="300">不支援Canvas。</canvas>

<script type="text/javascript">
(function(){
    var canvas,context,img;
    var init = function(){
        canvas = document.getElementById('myCanvas201312010535');
        context = canvas.getContext('2d');                   
    }; 
    
    var drawShadow = function(e){
        context.shadowBlur = 50; //光暈，模糊
        context.shadowColor = "rgba(255, 255, 255 ,1)";  //也可以使用rag(r,g,b)  or  直接給色碼
        context.beginPath();
        context.arc(100,100,50,0,Math.PI*2,false);
        context.closePath();
        context.fillStyle = "rgba(88,178,220,0.5)";
        context.fill();
        
        context.shadowBlur = 60; //光暈，模糊
        context.shadowColor = "rgba(225, 225, 225 ,1)";  //也可以使用rag(r,g,b)  or  直接給色碼
        context.shadowOffsetX = 10;
        context.shadowOffsetY = -5;
        context.beginPath();
        context.arc(250,100,50,0,Math.PI*2,false);
        context.closePath();
        context.fillStyle = "rgba(251,226,81,0.6)";
        context.fill(); 
         
     };    
    init();
    drawShadow();
}()); 
</script>