使用canvas绘制渐变特效

最新推荐文章于 2023-04-26 17:28:52 发布

weixin_34198583

最新推荐文章于 2023-04-26 17:28:52 发布

阅读量120

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3759656/blog/2247223

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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>

转载于:https://my.oschina.net/u/3759656/blog/2247223