canvas图形着色-线性渐变-createLinearGradient

最新推荐文章于 2024-05-23 15:34:19 发布

书院二层楼

最新推荐文章于 2024-05-23 15:34:19 发布

阅读量748

点赞数

分类专栏： canvas JS 文章标签： LinearGradient canvas

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109512884

版权

JS 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

canvas

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas图形着色-线性渐变</title>
</head>
<body>
    <canvas id="test"></canvas>
    <script>
        const cvs=document.getElementById('test');
        cvs.width=window.innerWidth;
        cvs.height=window.innerHeight;

        const ctx=cvs.getContext('2d');

        /*
        1.建立渐变对象，定义渐变的区域
        线性渐变  createLinearGradient(x1, y1, x2, y2)
        */
        const gr=ctx.createLinearGradient(
        50,50,
        450,450
        );

        /*
        2.为渐变添加颜色节点
        addColorStop(position, color)
        */
        gr.addColorStop(0,'green');
        gr.addColorStop(0.5,'yellow');
        gr.addColorStop(1,'#00abcd');

        /*3.为样式赋值*/
        ctx.fillStyle=gr;

        /*4.绘图*/
        ctx.fillRect(
            50,50,
            400,400
        )


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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

书院二层楼

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas图形着色-线性渐变-createLinearGradient

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas图形着色-线性渐变</title></head><body> <c.
复制链接

扫一扫