canvas入門-3漸層方法

標籤：style   blog   http   java   color   使用   

1、canvas中漸層方式有2種：線性漸層和徑向梯度漸層

createLineGradient()

createRadialGradient()

addColorStop(var1,var2);

var1 取值在0-1之間

var2 是顏色值

前面有講述線性漸層的作用，漸層是一個漸層對象

放射狀漸層方法createRadialGradient建立放射狀/圓形漸層對象

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

漸層可用於填充矩形、圓形、線條、文本等等。

1：請使用該對象作為 strokeStyle 或 fillStyle 屬性的值。

2：請使用 addColorStop() 方法規定不同的顏色，以及在 gradient 對象中的何處定位顏色

參數值：

參數	描述
x0	漸層的開始圓的 x 座標
y0	漸層的開始圓的 y 座標
r0	開始圓的半徑
x1	漸層的結束圓的 x 座標
y1	漸層的結束圓的 y 座標
r1	結束圓的半徑

<script type="text/javascript">var oCanvas = document.getElementById(‘canvas-1‘);var context = oCanvas.getContext(‘2d‘);//指向2d渲染環境的引用context.font = "30px Arial";var gradient=context.createRadialGradient(200,200,10,200,200,100);gradient.addColorStop("0","red");gradient.addColorStop("1.0","white");context.fillStyle = gradient;context.fillRect(0,0,400,400)</script>