HTML5 canvas lineargradient 实例

源代码
​x
 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body {
            margin:0px;
            padding: 0px;
        }
    </style>
</head>
<body>
​
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
​
<script type="text/javascript">
​
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
​
    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,0); //线性
    //var grd=ctx.createRadialGradient(75,50,5,90,60,100); //径向
    grd.addColorStop(0,"blue");
    grd.addColorStop(1,"white");
运行结果
W3CAPI 实例工具箱
