用Canvas为网页添加动态背景

最新推荐文章于 2023-12-18 20:10:29 发布

ued天机

最新推荐文章于 2023-12-18 20:10:29 发布

阅读量1.5w

点赞数 3

本文链接：https://blog.csdn.net/uedtianji/article/details/34433997

版权

本文介绍了如何利用HTML5的Canvas元素为手机网页制作动态背景。通过一步步详细讲解，包括新建Canvas元素、绘制矩形、实现动画效果、调整顶点以创建波浪形状，以及最后添加多个不同颜色的波浪，最终实现类似水波纹的效果。教程适用于前端开发者，特别是对Canvas感兴趣的读者。

摘要由CSDN通过智能技术生成

最近刚刚接到为微信公众帐号“玩转三里屯”制作首页的任务。考虑到页面只在手机中浏览，而且手机对canvas的支持又非常好，所以打算使用canvas做点不一样的动画。

首先来看下效果图。

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。

Step1.

新建一个画布（<canvas>)元素，并放在在所有按钮和logo的下方以免遮挡前面的元素。

<canvas id="canvas" style="position:absolute;top:0px;left:0px;z-index:1;"></canvas>

将Canvas的宽高设定成其父元素的宽高，以充满他的父元素。也可以直接使用 window.innerHeight,window.innerWidth。使其充满整个屏幕。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.parentNode.offsetWidth;
canvas.height = canvas.parentNode.offsetHeight;

Step2.

在画布中画一个充满半个屏幕的矩形。

我们只需要找到矩形的四个定点的坐标，使用Canvas的绘制路径并填充这个路径。四个点分别是：

(0, 画布高度t/2)
(画布宽度, 画布高度t/2)
(画布宽度画布高度t/2)
(0, 画布高度t/2)

注意：坐标的（0，0）在画布的左上角。

//填充颜色
ctx.fillStyle = "rgba(0,222,255, 0.2)";
//开始绘制路径
ctx.beginPath();
//左上角
ctx.moveTo(0, canvas.height/2);
//右上角
ctx.lineTo(canvas.width, canvas.height/2);
//右下角
ctx.lineTo(canvas.width, canvas.height)