使用canvas繪製漸變特效

時間 2019-11-24

標籤使用 canvas 繪製漸變特效简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>漸變</title>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			// 開始建立漸變對象，設置到填充樣式上，以供繪製矩形使用
			// var gradient = context.createLinearGradient(0,0,0,200);
			// var gradient = context.createLinearGradient(0,0,200,0);
			// var gradient = context.createLinearGradient(0,0,200,200);
			var gradient = context.createRadialGradient(100,100,20,100,100,200);
			// createRadialGradient
			gradient.addColorStop(0,'red');
			gradient.addColorStop(0.5,'pink');
			gradient.addColorStop(1,'blue');
			// 填充樣式等於漸變對象
			context.fillStyle = gradient;
			context.fillRect(0,0,200,200);
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>

相關標籤/搜索