HTML5繪製顏色漸變
阿新 • • 發佈：2019-02-14
繪製線性漸變要用到：createLinearGradient，方法如：XXX.createLinearGradient(xStart,yStart,xEnd,yEnd);
xStart為漸變起始地點的橫座標，yStart為漸變起始地點的縱座標，xEnd為漸變結束地點的橫座標，yEnd為漸變起始地點的縱座標。
繪製完座標後用addColorStop來設定漸變的顏色，方法如：XXX.addColorStop(offset,color);
offset為所設定顏色離開漸變起點的偏移量，在0-1之間。color為繪製的顏色。
<!DOCTYPE html> <meta charset="utf-8"> <head> </head> <body> <canvas id="jianbian" width="1000" height="1000"></canvas> <script type="text/javascript"> var c=document.getElementById("jianbian"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,1000,1000); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"rgba(0,0,255,0.5)"); cxt.fillStyle=grd; cxt.fillRect(0,0,1000,1000); </script> </body> </html>