位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > HTML > 問(wèn)題詳情

HTML5 繪制漸變圖像

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-14
漸變是指在兩種或兩種以上的顏色之間進(jìn)行平滑過(guò)渡。對(duì)于canvas來(lái)說(shuō)，漸變也是可以實(shí)現(xiàn)的。在canvas中可以實(shí)現(xiàn)兩種漸變效果：線性漸變和徑向漸變。

【例題】繪制線性漸變

代碼如下：

<!DOCTYPE html>

<htrol>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

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

</body>

<script>

// 獲取canvas的ID

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

// 獲取上下文

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

// 獲取漸變對(duì)象

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>

代碼需要說(shuō)明的是：

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

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


繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部