1. 程式人生 > >addColorStop()和createLinearGradient()方法

addColorStop()和createLinearGradient()方法

createLinearGradient:這個是canvas的context的一個方法,引數按順序是x0, y0, x1, y1,按我的理解其實就是定義了一根線,

顏色沿著這條線的指向進行漸變

addColorStop:這個方法有兩個引數,按順序是梯度,color,梯度的取值要在0-1之間,不然會報錯,這個方法決定了完成顏色漸變所需的長度,從0到1,意味這漸變知道長度結束才完成,這裡的長度指的是createLinearGradient方法確定的線的長度,從0到0.5

gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'white');




gradient.addColorStop(0, 'green');
gradient.addColorStop(0.5, 'white');

意味著,只需要一半的距離,顏色漸變就完成了