HTML Canvas 漸變 gradation

 http://www.w3school.com.cn/html5/html_5_canvas.asp

 

 

實例 - 漸變

使用您指定的顏色來繪製漸變背景：


JavaScript 代碼：
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;

 

 

cxt.fillRect(0,0,175,50);

</script>

canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>