canvas实现渐变文字

最新推荐文章于 2024-08-14 00:51:11 发布

hancense

最新推荐文章于 2024-08-14 00:51:11 发布

阅读量3.5k

点赞数 3

分类专栏： javascript 文章标签： javascript canvas

本文链接：https://blog.csdn.net/hancense/article/details/59103094

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>渐变文字</title>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="canvas" width="600" height="45"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            gradient = ctx.createLinearGradient(0, 0, 0, 40);

        ctx.shadowColor = 'rgba(0,0,0,0.9)';
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowBlur = 2;

        gradient.addColorStop(0,'black');
        gradient.addColorStop(0.3,'green');
        gradient.addColorStop(0.6,'yellow');
        gradient.addColorStop(1,'red');

        ctx.font = '40px Microsoft YaHei';
        ctx.fillStyle = gradient;

        ctx.fillText('hello world', 0, 40);
        ctx.restore();
    </script>
</body>
</html>