canvas文字 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{background: black;}
            #c1{background: wheat;}
        </style>
        <script>
            window.onload=function(){
            
                    var oc=document.getElementById('c1');
                    var gc=oc.getContext('2d');
                    gc.font='60px impact';//文字大小
                    gc.textBaseline='top';//middle bottom，上下位置的方式
                   
                   //文字阴影
                   gc.shadowOffsetX=10;
                   gc.shadowBlur=3;//高斯模糊
                   gc.shadowColor='yellow';//阴影颜色
                   
                   var w=gc.measureText('文字').width;
                   //参数为显示的文本和位置，下面是居中方法
                   gc.fillText('文字',(oc.width-w)/2,(oc.height-60)/2);//填充式文字
                   
                    gc.strokeText('text',0,200);//文字边框
                    
                    
            };
        </script>
    </head>
    <body>
     <canvas id="c1" width="800" height="800"></canvas>
    </body>
</html>

效果如下：

 

posted @ 2018-12-02 17:05  A-zero  阅读(381)  评论(0)    收藏  举报