html5 实例渐变

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <script>
        window.onload=function() {
               var canvas=document.getElementById('canvas');
               var ctx=canvas.getContext('2d');
               //渐变的位置
                var colorObj=ctx.createLinearGradient(0,0,100,0);
                //颜色的变化
                colorObj.addColorStop(0,"blue");
                colorObj.addColorStop(1,"green");
                ctx.fillStyle= colorObj;
                 ctx.fillRect(0,0,100,100);



        ctx.putImageData(imgData,0,0);
        }
    </script>
</head>
<body>
<canvas  id="canvas" width="500"  height="500"></canvas>
</body>
</html>

　　效果：

 

2017-09-12    09:51:31 

posted @ 2017-09-12 09:52  1点  阅读(417)  评论(0)    收藏  举报