canvas基础—03文本和阴影

深碍√TFBOYSˉ_ 2022-04-23 11:12 193阅读 0赞

### 1.文本1 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][] ###

demo.html

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
    
            oGC.font = '60px impact' //注意这块，后面必须指定文字，任意文字都可，如果不想，则写'impact' 
    
            oGC.textBaseline = 'top' //文字垂直方向以哪个为基准点  也可以是（middle,bottom）
            oGC.fillText('前端学习',0,0) //（文字，坐标x,坐标y）
    
            oGC.strokeText('前端学习',0,200) //空心的字体 
            
        }
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

###  2.文本2 ###

![20190214104731579.png][]

demo.html

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
    
            oGC.font = '60px impact' //注意这块，后面必须指定文字，任意文字都可，如果不想，则写'impact' 
    
            oGC.textBaseline = 'top' //文字垂直方向以哪个为基准点  也可以是（middle,bottom）
    
            var w = oGC.measureText('前端学习').width
            // 注意文字的高其实就是文字的大小，也就是60px
            oGC.fillText('前端学习',(oC.width-w)/2,(oC.height-60)/2) //（文字，坐标x,坐标y）
            
        }
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

###  3.阴影 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

demo.html

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
    
            oGC.font = '60px impact' //注意这块，后面必须指定文字，任意文字都可，如果不想，则写'impact' 
    
            oGC.textBaseline = 'top' //文字垂直方向以哪个为基准点  也可以是（middle,bottom）
            
            oGC.shadowOffsetX = 10
            oGC.shadowOffsetY = 20
            oGC.shadowBlur = 5
    
            oGC.shadowColor = 'yellow' //默认颜色黑色透明  rgba(0,0,0,0)
    
            var w = oGC.measureText('前端学习').width
            // 注意文字的高其实就是文字的大小，也就是60px
            oGC.fillText('前端学习',(oC.width-w)/2,(oC.height-60)/2) //（文字，坐标x,坐标y）
            
        }
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/f66fee6ea0c3446e90779d0f18212d0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/5fd27f17d16f491e914b0708097ea8ad.png
[20190214104731579.png]: /images/20220320/0861fa51ff5c46eea39ea47e9d3f9c15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220320/43b5941e31a54f2ca7da3d3bb556c0ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220320/80333d07df2c4373aad7a2a5b7601d75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220320/c200fe82e8814fde855ed7d3064b86f2.png