canvas画垂直渐变背景

最新推荐文章于 2023-05-05 08:58:47 发布

weixin_34310127

最新推荐文章于 2023-05-05 08:58:47 发布

阅读量983

点赞数 1

文章标签：移动开发

原文链接：https://my.oschina.net/biejun/blog/756072

版权

为什么80%的码农都做不了架构师？>>>

html5不仅可以用css3绘制渐变背景，svg和canvas都可以做到，最近在我的一个项目中就使用到了canvas来绘制渐变背景。

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<style>
		html,body{
			height: 100%;
			background: #545d93;
			overflow: hidden;
		}
		.btn-primary{
			width: 100%;
			background: #545d93;
			color: #fff;
		}
		.btn-primary:hover,.btn-primary:focus{
			color: #fff;
		}
		.btn-primary:hover,.btn-primary:active{
			background: #303F9F;
		}
		.logo{
			padding: 20px 0;
			color: #fff;
		}
		.box{
			background: #fff;
			border-radius: 2px;
			padding: 30px 20px;
		}
		.form-group{
			margin-bottom: 15px;
		}
		.form-group .form-control{
			height: 30px;
			padding: 4px 10px;
			border-radius: 3px;
			border-color: #ccc;
		}
		.form-group .form-control:focus{
			border-color: #545d93;
		}
		.form-group label{
			font-size: 12px;
		}
		.login-box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 300px;
			margin: 0 auto;
			padding-top: 120px;
		}
	</style>
	<title>LOGIN</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<section class="login-box">
		<h1 class="logo text-center">LOGO</h1>
		<div class="box">
			<div class="form-group">
				<label for="">用户名</label>
				<input type="text" class="form-control" placeholder="用户名">
			</div>
			<div class="form-group">
				<label for="">密码</label>
				<input type="password" class="form-control" placeholder="密码">
			</div>
			<button class="btn btn-primary">登录</button>
		</div>
	</section>

	<script>
	(function(){
		var width = window.innerWidth ,
			height = window.innerHeight;
		if(!canvas || !canvas.getContext) return false;

		canvas.setAttribute('width',width);
		canvas.setAttribute('height',height);
		var ctx = canvas.getContext('2d');
		var clg = ctx.createLinearGradient(0,0,0,height);
		clg.addColorStop(0,'#545d93'); // 第一个参数可以设定渐变位置 数字0~1之间
		clg.addColorStop(1,'#544D83');
		ctx.fillStyle = clg;
		ctx.fillRect(0,0,width,height);
	})();
	</script>
</body>
</html>

转载于:https://my.oschina.net/biejun/blog/756072