Canvas線性水平漸變
阿新 • • 發佈：2019-02-07
function drawScreen() { // 水平漸變值必須保持為0 var gr=context.createLinearGradient(0,0,100,0); // 新增顏色斷點 gr.addColorStop(0,'red'); gr.addColorStop(.5,'rgb(0,255,0)'); gr.addColorStop(1,'black'); // 應用fillStyle生成漸變 context.fillStyle=gr; context.fillRect(0,0,100,100); context.fillRect(0,100,50,100); context.fillRect(0,200,200,100); // 應用strokeStyle生成漸變 context.strokeStyle=gr; context.strokeRect(0,310,100,100); // 複雜形狀水平漸變 var gr=context.createLinearGradient(300,0,400,0); gr.addColorStop(0,'rgb(0,255,0)'); gr.addColorStop(.5,'blue'); gr.addColorStop(1,'red'); context.fillStyle=gr; context.beginPath(); context.moveTo(300,0); context.lineTo(350,0); context.lineTo(400,50); context.lineTo(350,100); context.lineTo(300,100); context.lineTo(300,0); context.stroke(); context.fill(); context.closePath(); }