大綱

參考

註解

分解說明

函數

canvas

函數說明
createLinearGradient(x0,y0,x1,y1)
指定畫布上的開始位置,
Parameter Description
x0 The x-coordinate of the start point of the gradient
y0 The y-coordinate of the start point of the gradient
x1 The x-coordinate of the end point of the gradient
y1 The y-coordinate of the end point of the gradient

fillRect(x,y,width,height)

參數	說明
x	左上
y	右下
width	寬, in pixels
height	高, in pixels

drawImage()

drawImage(image, x, y)
原圖顯示,(x,y) 表示canvas 的開始位置。
drawImage(image, x, y, width, height)
(x,y)同上，原圖按照指定的width(寬)、height(高)縮放影像.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
來源影像(s)中，位置(sx, sy)開始,寬高(sWidth,sHeight)切割;然後放置到畫布開始位置(dx, dy),且按照(dWidth,dHeight)縮放。

<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");

ctx.fillStyle = grd;  //grd
ctx.fillRect(20, 20, 150, 100);//注意:這裡20+15=170,在createLinearGradient()中的x0=170

</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>

行27:可以知道建立完成的linearGradient 只是用來填充用的。這裡填充矩形物件。