564day(-绘制一个渐变颜色的矩形.html)

最新推荐文章于 2021-06-26 05:23:23 发布

orangecloudy

最新推荐文章于 2021-06-26 05:23:23 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/orangecloudy/article/details/89409561

版权

《2019年4月21日》【连续 564天】

标题：-绘制一个渐变颜色的矩形.html；
内容：

 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
/*        .linearGradient{
            width: 400px;
            height: 100px;
            background-image: linear-gradient(to right,pink,blue);
        }*/
    </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
    /*也可以使用一个渐变的方案了填充矩形*/
    /*创建一个渐变的方案*/
    /*渐变是由长度的*/
    /*x0y0 起始点 x1y1 结束点  确定长度和方向*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    //linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;

    ctx.fillRect(100,100,400,100);

    /*pink---->blue*/
    /*回想线性渐变---->要素 方向  起始颜色 结束颜色 */
    /*通过两个点的坐标可以控制 渐变方向*/
</script>
</body>

orangecloudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
564day(-绘制一个渐变颜色的矩形.html)

《2019年4月21日》【连续 564天】标题：-绘制一个渐变颜色的矩形.html；内容： <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid...
复制链接

扫一扫