首页 » HTML5 » canvas内的字体实现阴影效果

canvas内的字体实现阴影效果

原文 http://blog.csdn.net/qq_30100043/article/details/79045945

2018-01-13 02:00:20阅读(489)

api介绍

可以通过几种全局context属性来控制阴影
shadowColor任何CSS中的颜色值。可以使用透明度(alpha)
ShadowOffsetX像素值。值为正数,向右移动阴影;值为负数,向左移动阴影
shadowOffsetY像素值。值为正数,向下移动阴影;值为负数,向上移动阴影
shadowBlur高斯模糊值。值越大,阴影边缘越模糊

案例代码

<a href=canvas内的字体实现阴影效果" src="http://img.blog.csdn.net/20180112165145795?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzAxMDAwNDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="">

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus?">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>练习</title>
    <style>
        #myCanvas {
            background-color:#00ffff
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="1072" height="200">您的浏览器不支持canvas!</canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    // 设置文字阴影的颜色为黑色,透明度为20%
    context.shadowColor = 'rgba(0, 0, 0, 0.2)';
    // 将阴影向右移动15px,向上移动10px
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 2;
    // 轻微模糊阴影
    context.shadowBlur = 2;
    // 字号为60px,字体为impact
    context.font = "100px 楷体";
    // 将文本填充为棕色
    context.fillStyle = '#ffffff';
    // 将文本设为居中对齐
    context.textAlign = 'center';
    context.textBaseline='middle';
    // 在canvas顶部中央的位置,以大字体的形式显示文本
    context.fillText('现在学习也不晚', 536, 100);
    context.restore();
</script>
</body>
</script>
</html>

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹