【Canvas】線性漸變色例子-垂直方向漸變
阿新 • • 發佈：2022-01-09
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>線性漸變色例子-垂直方向漸變</title>
</head>
<body onload="draw()">
<canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
出現文字表示你的瀏覽器不支援HTML5
</canvas>
</body>
</html>
<script type="text/javascript">
<!--
function draw(){
var canvas=document.getElementById('myCanvus');
canvas.width=400;
canvas.height=400;
var ctx=canvas.getContext('2d');
ctx.translate(200,200);
// 從上到下垂直漸變，注意之前有平移
var linegrad=ctx.createLinearGradient(0,-200,0,200);
linegrad.addColorStop(0,"white");// 白色
linegrad.addColorStop(1,"navy");// 海藍
ctx.fillStyle=linegrad;
ctx.fillRect(-200,-200,400,400);
};
//-->
</script>效果：
END