HTML5动画----canvas基础6（3创建阴影、绘制文字）

创建阴影：

<script type="text/javascript">
            function draw(){
                var ctx=document.getElementById("myCanvas").getContext('2d');
                //设置阴影
                ctx.shadowOffsetX=3;
                ctx.shadowOffsetY=3;
                ctx.shadowBlur=2;
                ctx.shadowColor='rgba(0,0,0,0.5)';
                //绘制矩形
                ctx.fillStyle='#33ccff';
                ctx.fillRect(20,20,300,60);
                ctx.fill();
                //绘制文本
                ctx.font="45px 黑体";
                ctx.fillStyle='#ffffff';
                ctx.fillText('我和我的祖国',30,64)
            }
            window.οnlοad=function(){
                draw();
            }
        </script>
        <canvas id="myCanvas" width="400" height="200"></canvas>

 绘制文字： fillText()和strokeText()    

    <script type="text/javascript">
//绘制文字使用的是 fillText()和strokeText()            
// ctx.fillText(text,x,y,[maxWidth]); 字符串、xy坐标、maxWidth（显示的最大宽度，可选）            
            function draw(){
                var ctx=document.getElementById("myCanvas").getContext('2d');
                ctx.font="italic 35px 黑体";
                ctx.fillStyle='red';
                ctx.fillText("我和你心连心我和你心连心",30,60,200);
                ctx.font="bold 35px 宋体";
                ctx.fillStyle='blue';
                ctx.fillText("我和你心连心",30,130);
                ctx.font="25px 隶书";
                ctx.fillStyle='green';
                ctx.fillText("我和你心连心",30,170);
                
                ctx.strokeStyle='green';
                ctx.strokeText("我和你心连心",30,200);
                var txt1="伟大的中国人民"
                ctx.strokeStyle='green';
                ctx.strokeText(txt1,30,230);
                var mtx1=ctx.measureText(txt1);
                ctx.strokeStyle='green';
                ctx.strokeText('以上字符串的宽度为：',30,270);
                ctx.strokeText(mtx1.width,270,270);
            }
            window.οnlοad=function(){
                draw();
            }
        </script>
        <canvas id="myCanvas" style="border:1px solid;" width="350" height="800"></canvas>