zoukankan      html  css  js  c++  java
  • 【Canvas】线性渐变色例子垂直方向渐变

    代码:

    <!DOCTYPE html>
    <html lang="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
         <title>线性渐变色例子-垂直方向渐变</title>
        </head>
    
         <body onload="draw()">
            <canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
                出现文字表示你的浏览器不支持HTML5
            </canvas>
         </body>
    </html>
    <script type="text/javascript">
    <!--
    
    function draw(){
        var canvas=document.getElementById('myCanvus');    
        canvas.width=400;
        canvas.height=400;    
    
        var ctx=canvas.getContext('2d');   
        ctx.translate(200,200);
    
        // 从上到下垂直渐变,注意之前有平移
        var linegrad=ctx.createLinearGradient(0,-200,0,200);
        linegrad.addColorStop(0,"white");// 白色
        linegrad.addColorStop(1,"navy");// 海蓝
    
        ctx.fillStyle=linegrad;
        ctx.fillRect(-200,-200,400,400);
    };
    
    //-->
    </script>

    效果:

    END

  • 相关阅读:
    POJ 2689
    NEFU 109
    HDU 2098
    NEFU 2
    NEFU 117
    NEFU 84
    POJ 1061
    NEFU116 GCD
    NEFU 115
    HDU 2099
  • 原文地址:https://www.cnblogs.com/heyang78/p/15776506.html
Copyright © 2011-2022 走看看