css文字实例锦集

在画布上创建向上的3D拉影文字

<canvas id="myCanvas" width="410" height="130"></canvas>
<script src="jquery.min.js"></script>
<script>
    $(function () {
        var myCanvas = document.getElementById('myCanvas');
        var myContext = myCanvas.getContext('2d');
        myContext.font = "40pt 宋体";
        var height = 0;
        myContext.fillStyle = "black";
        myContext.fillRect(0, height, 410, 130);

        for (var i = 0; i < 10; i++) {
            myContext.shadowColor = `rgba(255,255,255,${(10 - i) * 10})`;
            // 特效文字一
            myContext.shadowOffsetX = i+2;
            myContext.shadowOffsetY = i+2;
            // 特效文字二
            // myContext.shadowOffsetX = -i+2;
            // myContext.shadowOffsetY = -i+2;
            myContext.shadowBlur = i*2;
            myContext.fillStyle = "rgba(127,127,127,1)";
            myContext.fillText("炫酷实例锦集", 40, 80, 300);
        }
    }); // onload
</script>

1. font
   字体
2. fillStyle
   填充颜色，填充图形、文字等
3. fillRect()
   绘制矩形
4. shadowColor: 阴影颜色
5. shadowOffsetX: x轴阴影方向偏移量
6. shadowOffsetY: x轴阴影方向偏移量
7. shadowBlue: 阴影模糊效果，值越大，模糊越厉害
8. fillText: 填充文字
9. strokeText: 绘制文字，没有填充