線性漸變
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//實現(xiàn)漸變效果
//1.獲取漸變對象
//后面的參數(shù)有兩種功能，設(shè)置漸變的方向镀琉，設(shè)置漸變的范圍
var grd = context.createLinearGradient(200,100,200,400);
//2.設(shè)置漸變的顏色
/*
參數(shù)1：指定顏色的位置拇泛，取值范圍0-1，相對于漸變范圍
參數(shù)2：顏色
*/
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"orange");
//3.將漸變對象賦值給填充顏色
context.fillStyle = grd;
//4.畫圖
context.fillRect(0,0,canvas.height,canvas.width);
</script>
徑向漸變
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//1.創(chuàng)建扇形漸變對象
/*
前三個參數(shù)是一個開始圓幢踏，后三個參數(shù)構(gòu)成一個結(jié)束圓
兩個圓確定漸變的方向和范圍
*/
var grd = context.createRadialGradient(50,50,50,30,80,100);
//2.設(shè)置漸變顏色
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"pink");
//3.將漸變對象作為填充顏色
context.fillStyle = grd;
//4.繪制
context.fillRect(0,0,350,350);
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
