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

最新推荐文章于 2024-11-14 18:21:58 发布

Puzo0074

最新推荐文章于 2024-11-14 18:21:58 发布

阅读量965

点赞数

CC 4.0 BY-SA版权

分类专栏： java-web 文章标签： html 界面 javascript

本文链接：https://blog.youkuaiyun.com/Puzo0074/article/details/77860101

java-web 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用HTML5的<canvas>标签创建渐变背景，并通过实践发现其局限性。最终采用CSS渐变技术解决问题，实现了简洁且高效的页面背景效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做一个界面时，想到用颜色渐变的图片做背景，刚好在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>

这是一波三折啊！