HTML5 繪制漸變圖像

提問人：劉團圓發(fā)布時間：2020-11-14

漸變是指在兩種或兩種以上的顏色之間進行平滑過渡。對于canvas來說，漸變也是可以實現(xiàn)的。在canvas中可以實現(xiàn)兩種漸變效果：線性漸變和徑向漸變。

【例題】繪制線性漸變

代碼如下：

<!DOCTYPE html>

<htrol>

<head>

<title>Document</title>

</head>

<body>

<canvas id>"canvas" width="400" height="400"></canvas>

</body>

// 獲取canvas的ID

var canvas = document.getElementById('canvas');

// 獲取上下文

var context = canvas.getContext('2d');

// 獲取漸變對象

var gl = context.createlinearGradient(0,0,0,300);

var gl = context.createLinearGradient(0,0,0,300);

// 添加漸變顏色

gl.addGolorStop(0,'rgb(255,255,0)');

gl.addGolorStop(1,'rgb(0,255,255)');

context.fillStyles = g1;

context.fillRect(0,0,400,300);

var g2 = context.createLinearGradient(0,0,300,0);

g2.addColorStop(0,'rgba(0,0,255,0.5)');

g2.addColorStop(1,'rgba(255,0,0,0.5)');

for(var i = 0; i<10;i++)

{

context.beginPath();

context.fillStyle=g2;

context.arc(i*25, I*25, I*10, 0, Math.PI * 2, true);

context,closePath();

context,fill();

}

</script>

</html>

代碼需要說明的是：

?createLinearGradient(x1，y1,x2,y2):參數(shù)分別表示漸變起始位置和結(jié)束位置的橫縱坐標(biāo)。

?addColorStop(offset,color): offset表示設(shè)定的顏色離漸變起始位置的偏移量，取值范圍是 0-1的浮點值。漸變起始偏移量是0,漸變結(jié)束偏移量是1, color是漸變的顏色。

相關(guān)視頻回答

回復(fù)(0)