您的位置：首页 > Web前端 > JavaScript

构建颜色渐变的网页背景（HTML+JS）

2017-09-05 23:38 387 查看

之前做一个界面时，想到用颜色渐变的图片做背景，刚好在HTML的书中，看到了可以使用

<canvas>

标签来实现。在这里就直接上代码了。

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
#canvas1{
width:100%;
height:100%;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<script>
var canvas=document.getElementById('canvas1');
var context=canvas.getContext('2d');
var gradient=context.createLinearGradient(0,0,0,canvas.height);
gradient.addColorStop(0,'#0080FF');
gradient.addColorStop(1,'white');
context.fillStyle = gradient;
context.fillRect(0,0,canvas.width,canvas.height);
</script>
</body>
</html>

coding、coding、、、、，就照着书上的步骤把代码写好了。效果如下：

效果看起来让我还是觉得可以的，但是，等我再想往其中添加一些别的标签元素，比如

<div>

，发现没有任何内容在画布上显示。一查之下，才明白<canvas>
标签不支持任何内容标签插入，如果想让div在canvas上面显示，需要将div放在canvas的同级，然后将div的position设置成absolute或fixed。之后觉得这样设置，元素的布局特别麻烦。于是又想到，可以使用toDataURL()方法返回一个包含图片展示的 data URI ，然后用浏览器打开该文件，再把图片保存，用于做背景图片。只要在上面的脚本代码中添加下面两行代码即可。

var fullQuality=canvas.toDataURL("image/jpeg", 1.0);
console.log(fullQuality);

在这里toDataURL()的第二个参数用于设定是保存的图片的质量，范围从0至1.0，1.0就是最高的质量。

然而，老定律，想法总是那么好，现实终归是太骨感。当把图片扩放至整个浏览器的屏幕时，1.0的高质量还是不够高。

后来，当我和我同学讨论这个烦人的问题时，他给了我一个很好的解决办法–使用CSS来实现渐变效果。这样前面的问题就都可以很好的解决了。还是直接上代码吧！

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
min-width:1500px;
}
#div{
height:100%;
width:100%;
background: -webkit-linear-gradient(#0080FF, white); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#0080FF, white); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#0080FF, white); /* Firefox 3.6 - 15 */
background: linear-gradient(#0080FF, white); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>

这是一波三折啊！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航