canvas 线性渐变填充【每日一段代码62】
<html>
<head>
<title>canvas 线性渐变填充</title>
<script type="text/javascript">
var can;
var cxt;
function init()
{
can=document.getElementById("can");
cxt=can.getContext("2d");
drawGradient();
}
function drawGradient(){
var grad=cxt.createLinearGradient(10,0,80,0);
grad.addColorStop(0,"blue");
grad.addColorStop(1,"yellow");
cxt.fillStyle=grad;
cxt.fillRect(10,10,100,100);
}
</script>
</head>
<body style-"margin:100px 10px;" onload="init()" style="background-color:#e0e0e0;">
<canvas id="can" height="120" width="120" style="border:solid 2px #06f;"></canvas>
</body>
</html>
显示效果如下：
html5
