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: 绘制文字，没有填充

同理可以向下、左、右拉影。或者多个方向可以同时绘制，实现羽化的效果。

空心线条的文字

1. 绘制线条宽度为3的白色文字
2. 填充白色文字

<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 = "white";
        myContext.fillRect(0, height, 410, 130);

        myContext.lineWidth = 3;
        myContext.strokeStyle = 'green';
        myContext.strokeText('炫酷实例锦集',40,80);

        myContext.fillStyle = 'white';
        myContext.fillText('炫酷实例锦集',40,80);
    }); // onload
</script>

半透明阴影文字

// shadow
myContext.shadowOffsetX = 2;
myContext.shadowOffsetY = 2;
myContext.shadowBlur = 2;
myContext.shadowColor = 'rgba(0,0,0,0.5)';
// 文字颜色线性渐变
var gradient = myContext.createLinearGradient(0,0,400,0);
gradient.addColorStop(0, 'red'); // 开始
gradient.addColorStop(1, 'green'); // 结束
myContext.fillStyle = gradient;
myContext.font = "40pt 宋体";

myContext.fillText('炫酷实例锦集',40,80);

1. c.greateLinearGradient() ：创建线性渐变对象，是一种颜色
2. c.save() 保存当前环境状态（属性等）
3. c.restore() 恢复状态
4. c.scale(2,1) 缩放当前绘制，表示水平防线拉伸2倍，垂直方向不变，