zoukankan      html  css  js  c++  java
  • canvas绘制一个渐变颜色的矩形

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            canvas {
                border: 1px solid #ccc;
            }
    /*        .linearGradient{
                 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>
    </html>

    运行结果如下:

    别废话,拿你代码给我看。
  • 相关阅读:
    poj 3669 Meteor Shower
    poj 3232 Accelerator
    poj 2155 Matrix
    poj 3628 Bookshelf 2
    cf C. Maze
    cf B. Fox Dividing Cheese
    hdu Children’s Queue
    cf D. Broken Monitor
    cf C. Mittens
    cf B. Berland Bingo
  • 原文地址:https://www.cnblogs.com/lvxueyang/p/13707452.html
Copyright © 2011-2022 走看看