JavaScript 绘制线性渐变

最新推荐文章于 2023-03-06 19:45:21 发布

MrLc666

最新推荐文章于 2023-03-06 19:45:21 发布

阅读量10w+

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文章博主原创，希望对你有所帮助。

本文链接：https://blog.csdn.net/sakenc/article/details/92118175

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="myCanvas" width="300" height="200"></canvas>
    <script type="text/javascript">
        var ctx = document.getElementById('myCanvas').getContext('2d');
        var lingrad = ctx.createLinearGradient(0, 0, 0, 200);
        lingrad.addColorStop(0, '#ff0000');
        lingrad.addColorStop(1 / 7, '#ff9900');
        lingrad.addColorStop(2 / 7, '#ffff00');
        lingrad.addColorStop(3 / 7, '#00ff00');
        lingrad.addColorStop(4 / 7, '#00ffff');
        lingrad.addColorStop(5 / 7, '#0000ff');
        lingrad.addColorStop(6 / 7, '#ff00ff');
        lingrad.addColorStop(1, '#ff0000');
        ctx.fillStyle = lingrad;
        ctx.strokeStyle = lingrad;
        ctx.fillRect(10, 10, 200, 200);

    </script>
</body>
</html>

优惠劵

MrLc666

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 绘制线性渐变

<!doctype html><html><head> <meta charset="utf-8"></head><body> <canvas id="myCanvas" width="300" height="200"></canvas> <script t...
复制链接

扫一扫