以下為 HTML5 Canvas 繪製線型漸層範例
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
// 取得 Canvas 元素
var c=document.getElementById("myCanvas");
// 建立繪製物件
var ctx=c.getContext("2d");
// 建立線型漸層物件 參數依序為 x0(x起始點)、y0(y起始點)、x1(x結束點)、y1(y結束點)
var grd=ctx.createLinearGradient(0,0,175,50);
// 設定顏色位置 參數依序為 position(0.0 到 1.0，0 即為起始點，1 即為結束點)、顏色代碼
grd.addColorStop(0,"#FF0000");
// 設定顏色位置 參數依序為 position(0.0 到 1.0，0 即為起始點，1 即為結束點)、顏色代碼
grd.addColorStop(1,"#00FF00");
// 設定填滿樣式
ctx.fillStyle=grd;
// 執行填滿繪製 參數依序為 x、y、width(寬)、height(高)
ctx.fillRect(0,0,175,50);
</script>
</body>
</html>
結果如下
文章標籤
全站熱搜
Technology (30)