使用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>