用Canvas为网页加入动态背景

最新推荐文章于 2023-12-18 20:10:29 发布
最新推荐文章于 2023-12-18 20:10:29 发布
阅读量235 收藏
点赞数

近期刚刚接到为微信公众帐号“玩转三里屯”制作首页的任务。

考虑到页面仅仅在手机中浏览。并且手机对canvas的支持又很好，所以打算使用canvas做点不一样的动画。

首先来看下效果图。


要实现这种动画普通的CSS3是鞭长莫及了，仅仅能使用Canvas。好在使用canvas也很easy。

Step1.

新建一个画布（<canvas>)元素，并放在在全部button和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;


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);
//左下角
ctx.lineTo(0, canvas.height);
//左上角
ctx.lineTo(0, canvas.height/2);
//闭合路径
ctx.closePath();
//填充路径
ctx.fill();



//填充颜色
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);
//左下角
ctx.lineTo(0, canvas.height);
//左上角
ctx.lineTo(0, canvas.height/2);
//闭合路径
ctx.closePath();
//填充路径
ctx.fill();

执行代码：


Step3.

让矩形动起来。

要做动画我们须要持续的清空画布并又一次绘制新的矩形。就像电影每秒播放24张图片。我们新建一个loop函数，用来绘制每一帧的图像，并使用requestAnimFrame来告诉浏览器每一帧都要使用loop来绘制。

//假设浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame    ||
		function( callback ){
          window.setTimeout(callback, 1000 / 60);
        };
})();
function loop(){
	requestAnimFrame(loop);
}
loop();


把之前绘制矩形的代码放到loop中。并在绘制矩形的代码之前清空画布中全部的图形。 
function loop(){
	//清空canvas
	ctx.clearRect(0,0,canvas.width,canvas.height);
	//绘制矩形
	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);
	ctx.lineTo(0, canvas.height);
	ctx.lineTo(0, canvas.height/2);
	ctx.closePath();
	ctx.fill();
	requestAnimFrame(loop);
}


function loop(){
	//清空canvas
	ctx.clearRect(0,0,canvas.width,canvas.height);
	//绘制矩形
	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);
	ctx.lineTo(0, canvas.height);
	ctx.lineTo(0, canvas.height/2);
	ctx.closePath();
	ctx.fill();
	requestAnimFrame(loop);
}
接下来我们更改每一帧中的矩形的高度来模拟波浪的形态。波浪事实上是在波峰与波谷之间做周期性运动。我们如果波峰与波谷间都是50px。那么矩形的高度的变化值应该在-50px到50px之间。为了达到周期性的效果我们採用正弦函数sin(x)，由于无论x值怎么变化sin(x)的值始终在-1与1之间。我们新建一个变量 var step =0 使其在每一帧中自增，表示每一帧角度添加一度，并用Math.sin()取他的正弦值。JS中的sin使用的弧度值，我们须要把step转换成弧度值,var angle = step*Math.PI/180; 取角度的正弦值乘以50得到了矩形高度的变化量。

将变化量加在矩形的左上与右上两个顶点的y坐标上。 

//初始角度为0
var step = 0;
function loop(){
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.fillStyle = "rgba(0,222,255, 0.2)";
	//角度添加一度
	step++;
	//角度转换成弧度
	var angle = step*Math.PI/180;
	//矩形高度的变化量
    var deltaHeight   = Math.sin(angle) * 50;
    ctx.beginPath();
    //在矩形的左上与右上两个顶点加上高度变化量
    ctx.moveTo(0, canvas.height/2+deltaHeight);
    ctx.lineTo(canvas.width, canvas.height/2+deltaHeight);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.lineTo(0, canvas.height/2+deltaHeight);
    ctx.closePath();
    ctx.fill();
	requestAnimFrame(loop);
}


执行代码：



将右上顶点的变化值改为角度的余弦，使其左右不同步。var deltaHeightRight   = Math.cos(angle) * 50;

//初始角度为0
var step = 0;
function loop(){
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.fillStyle = "rgba(0,222,255, 0.2)";
	//角度添加一度
	step++;
	//角度转换成弧度
	var angle = step*Math.PI/180;
	//矩形高度的变化量
    var deltaHeight   = Math.sin(angle) * 50;
    //矩形高度的变化量(右上顶点)
    var deltaHeightRight   = Math.cos(angle) * 50;
    ctx.beginPath();
    ctx.moveTo(0, canvas.height/2+deltaHeight);
    //右上顶点
    ctx.lineTo(canvas.width, canvas.height/2+deltaHeightRight);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.lineTo(0, canvas.height/2+deltaHeight);
    ctx.closePath();
    ctx.fill();
	requestAnimFrame(loop);
}


执行代码：


Step4

将矩形的顶上的边变成曲线。

在上面的代码中我们用lineTo来绘制矩形的边，为了要绘制曲线我们须要

bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)

函数。绘制的起点是矩形的左上顶点，结束点为右上顶点。

bezierCurveTo函数的參数中(cpX1,cpY1)与(cpX2,cpY2)各自是起点与结束点的控制点。(x,y)为结束点。

我们将两个控制点的x值设定在画布的正中心，y值在起始点与终点的y值上面减去50;(canvas.width /2, canvas.height/2+deltaHeight-50),(canvas.width / 2,canvas.height/2+deltaHeightRight-50)，能够依据效果调整。

ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width,canvas.height/2+deltaHeightRight);

ctx.beginPath();
ctx.moveTo(0, canvas.height/2+deltaHeight);
//ctx.lineTo(canvas.width, canvas.height/2+deltaHeightRight);
//画曲线
ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.lineTo(0, canvas.height/2+deltaHeight);
ctx.closePath();


ctx.beginPath();
ctx.moveTo(0, canvas.height/2+deltaHeight);
//ctx.lineTo(canvas.width, canvas.height/2+deltaHeightRight);
//画曲线
ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.lineTo(0, canvas.height/2+deltaHeight);
ctx.closePath();
执行代码：


Step5

一个波浪画好了。我们仅仅须要同一时候画3个不同颜色的波浪，而且使不同波浪的角度不同就能够得到效果图中的效果了。


//定义三条不同波浪的颜色
var lines = ["rgba(0,222,255, 0.2)",
               "rgba(157,192,249, 0.2)",
               "rgba(0,168,255, 0.2)"];
function loop(){
	ctx.clearRect(0,0,canvas.width,canvas.height);
	step++;
	//画3个不同颜色的矩形
	for(var j = lines.length - 1; j >= 0; j--) {
		ctx.fillStyle = lines[j];
		//每一个矩形的角度都不同，每一个之间相差45度
    	var angle = (step+j*45)*Math.PI/180;
	    var deltaHeight   = Math.sin(angle) * 50;
	    var deltaHeightRight   = Math.cos(angle) * 50;
	    ctx.beginPath();
	    ctx.moveTo(0, canvas.height/2+deltaHeight);
	    ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight);
	    ctx.lineTo(canvas.width, canvas.height);
	    ctx.lineTo(0, canvas.height);
	    ctx.lineTo(0, canvas.height/2+deltaHeight);
	    ctx.closePath();
	    ctx.fill();
	}
	requestAnimFrame(loop);
}


执行代码：


Step6

加入好button与logo的HTML代码就大功告成了。



查看全部代码请去Github


如有问题或者建议请微博@UED天机。

我会及时回复

也能够收藏天机的官网，http://ued.sexy/  常常更新最新的教程。



======

相关阅读

1.css3动态背景


weixin_34204057
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Canvas为网页添加动态背景
06-25 1万+
随着浏览器对HTML5的支持越来越好，尤其是移动浏览器，用canvas做动画将不再是问题。虽然CSS3的transform属性已经很强大，但是在canvas面前也只能是小儿科。今天就用canvas画一些好玩的。
网页动态背景代码（4种）
05-09
包含4个网页动态背景特效，canvas特效，svg特效，需要的可以下载使用或者学习
canvas借助css的animation实现动画渐变效果
九段刀客的博客
12-14 641
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title>.
vue 【vanta.js】 网站动态背景
一个懒惰前端的博客
06-15 1699
vue 【vanta.js】 网站动态背景
canvas 实现动态背景图
HurryUpp的博客
07-27 666
【代码】canvas 实现动态背景图。
canvas实战之酷炫背景动画（二）
风舞红枫的个人博客
03-04 1330
hello，今天赶了一天的路，刚刚闲停下来，本节带着大家梳理一下上一节的实现思路 首先分析博客背景效果，其中无非就是点与线，再加了一些运动效果，所以我们自然要从点入手，无点何以有线。 再分析每次刷新界面时点的位置是随机的，个数也应当是用户所设定的,点的大小应该也由用户设定。所以我们应该随机到一个这样的数据格式 [ [x1,y1,r1], [x2.y2,r2], .... [xn,yn,rn] ] 或者json格式的数据也可以，个人习惯了二维数组。 下面就是根据现有分析编写的代码 <scrip
HTML5 canvas圣诞节雪花网页背景代码
05-01
在这个特定的案例中，“HTML5 canvas圣诞节雪花网页背景代码”是一个利用canvas来创建动态雪花飘落效果的代码示例，特别适合应用于圣诞节、元旦或春节等节日的网页背景，为网站增添节日气氛。 首先，我们要理解...
HTML5 canvas网页背景生成器
05-01
总之，"HTML5 Canvas网页背景生成器"结合了HTML5 Canvas的绘图能力与JavaScript的动态特性，创造出独特的视觉体验。这个工具不仅展示了Canvas的强大功能，也为开发者提供了学习和实践Canvas技术的实例。通过深入理解...
Canvas知乎登录页面背景动画特效代码
03-20
【Canvas知乎登录页面背景动画特效代码】是一种利用HTML5的Canvas元素来创建具有动态线条背景效果的登录页面。Canvas是HTML5的一个核心特性，它允许开发者在网页上绘制图形，从而实现丰富的交互式视觉效果。 在这款...
Canvas酷炫全屏动态背景动画特效特效代码
03-20
Canvas鼠标经过碎片高亮变化特效是一款酷炫的全屏星星闪烁星空动态背景动画特效。
Canvas酷炫全屏动态背景动画特效.zip
07-05
Canvas鼠标经过碎片高亮变化特效是一款酷炫的全屏星星闪烁星空动态背景动画特效。
Canvas日本伞背景动画特效
07-24
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式2D视觉效果。...通过学习和掌握Canvas技术，开发者可以为用户提供更加生动、个性化的网页互动体验。
html5 canvas光标线条粒子动画背景特效
11-06
"html5 canvas光标线条粒子动画背景特效"是一个利用Canvas API实现的创新视觉效果，将用户的鼠标光标动作转化为动态的线条粒子动画，为网页增添了一种引人入胜的背景效果。 在Canvas中，我们可以通过JavaScript来...
以canvas为动态网页背景，添加的标签内容不显示（附源码-----动态背景星空）
袁的博客
11-07 982
以canvas为动态网页背景，添加的标签内容不显示（附源码-----动态背景星空）
几种炫酷的canvas动态背景特效
热门推荐
u011626414的专栏
01-06 1万+
canvas光斑闪烁动态背景特效 立即下载 在线预览 canvas科技感粒子特效，html5科幻粒子动画代码，js鼠标跟随。 立即下载 在线预览 htm5圆圈线条连接动画网页背景 立即下载 在线预览 ...
canvas实战之酷炫背景动画（四）
风舞红枫的个人博客
03-04 444
既然上一节出现了绘制两次直线以及连接处不在圆点处的bug是由于两次for嵌套后造成二次直线绘制时坐标发生了变化所产生的结果。 那我们就将绘制直线提出来，等待圆点绘制完成后再去实现直线的绘制来解决圆点与直线错位问题。 而二次绘制的情况是由于for嵌套后点1到点2,点2到点1绘制了两次，所以我们可以选择只绘制第一次或则第二次 实现原理 for(var i = 0 ; i < x ; i++){ for(var j = 0 ; j < i-1 ; j++){ 在这里进行绘制即可实现只有一次绘制
利用Canvas画布实现动态背景
最新发布
水瓶KaKei的博客
12-18 2639
引言 在现代网页设计中，动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Canvas技术来创建一个简单动态背景效果。通过代码示例，你将学习如何编写和利用Canvas绘制动态场景，从而实现一个独特而吸引人的背景效果。
如何实现一个动态的背景图？
qq_51553749的博客
04-06 2850
我们可以通过 animation-name 来指定一个动画的名字，通过 animation-duration 来指定一个动画的持续时间，通过 animation-iteration-count 来指定一个动画的重复次数，以及通过 animation-timing-function 来指定一个动画的速度曲线等等。比如，我们可以用一个星空的背景图，让星星闪烁，或者用一个下雪的背景图，让雪花飘落。当然，这只是一些简单的例子，我们还可以通过组合不同的动画效果和属性来实现更多的创意和功能。写一个有趣的前端博客。
给我写一个烟花特效网页
08-24
### 回答1： 好的，我会尽力帮你写一个烟花特效的网页。 首先，你需要准备一个 HTML 文件，在其中引入一个 canvas 元素。这个 canvas 元素用来绘制烟花效果。你可以在 canvas 元素中定义宽度和高度，以便调整烟花效果的大小。 ```html <canvas id="fireworks" width="800" height="600"></canvas> ``` 然后，你需要写一个 JavaScript 代码来绘制烟花效果。首先，通过使用 canvas 元素的 getContext() 方法获取 canvas 的绘图上下文。然后，你可以使用这个上下文来绘制烟花效果。 例如，你可以使用上下文的 fillStyle 属性来设置烟花的颜色，使用 beginPath() 方法开始一条新路径，然后使用 arc() 方法绘制一个圆形，最后使用 fill() 方法填充这个圆形。 ```javascript // 获取 canvas 的绘图上下文 const ctx = document.getElementById('fireworks').getContext('2d'); // 设置烟花的颜色 ctx.fillStyle = 'orange'; // 开始一条新路径 ctx.beginPath(); // 绘制一个圆形 ctx.arc(100, 100, 50, 0, Math.PI * 2, true); // 填充圆形 ctx.fill(); ``` 你还可以使用动画来模拟烟花的上升和爆炸的过程。你可以使用 window 对象的 requestAnimationFrame() 方法来定义一个动画循环，在每一帧中更新烟花的位 ### 回答2： 烟花特效网页是一种利用HTML、CSS和JavaScript技术制作的动态网页，通过在网页上展示炫丽的烟花效果，给用户带来视觉上的享受和惊喜。 烟花特效网页的制作可以分为以下几个步骤： 首先，在HTML中创建一个带有画布元素的容器。通过CSS样式对容器进行布局和美化，设置背景图片或颜色，并设置容器的宽度和高度。 接下来，在JavaScript中编写代码实现烟花特效。可以使用canvas标签和JavaScript绘图API，如`getContext('2d')`方法来绘制烟花的形状、颜色和粒子效果。可以使用数学函数来计算烟花的运动轨迹、速度和加速度。 然后，添加事件监听器，当用户点击或鼠标悬停在画布上时触发烟花效果。可以使用`addEventListener`方法来监听鼠标事件，并在事件处理函数中触发烟花的效果。 在烟花特效的绘制过程中，可以使用定时器或动画库来控制烟花的动画效果，使其呈现出闪烁、爆炸和消失的动态效果。可以给烟花粒子添加颜色渐变、透明度变化等特效，增强视觉效果。 最后，可以通过CSS添加一些附加效果，如背景音乐、过渡动画、背景图案等来增加网页的互动性和美观度。 总之，制作烟花特效网页需要HTML、CSS和JavaScript等技术的综合运用，以创造出精美绚丽的烟花效果，为用户带来观赏和体验的乐趣。 ### 回答3： 当然可以！下面是一个简单的烟花特效网页的实现思路。 首先，你需要一个HTML文件来构建网页框架。在这个页面中，你可以使用嵌入的CSS样式来设置背景色、字体样式等基本样式。然后，在页面的主体部分，你可以放置一个按钮或者其他触发器，用于启动烟花特效。 其次，你需要使用JavaScript来编写特效的逻辑。在触发器被点击时，你可以使用Canvas元素来创建一个画布，然后在画布上绘制烟花的效果。你可以定义一些函数来控制烟花的行为，例如设置烟花的颜色、位置、速度、大小等等。可以通过生成随机数来增加随机性，使烟花看起来更加真实。 在编写特效的过程中，你可以使用一些动画效果，例如缓动函数来实现烟花升起、爆炸、散落等过程的流畅动画。还可以使用定时器来控制烟花的发射间隔，以及过程中的动画效果。 最后，在页面中加入一些音效可以增加特效的观赏性。你可以在特效开始时播放一段烟花发射的声音，或者在爆炸时添加爆炸声音。 总的来说，通过HTML、CSS、JavaScript的组合，以及一些动画技巧和音效的搭配，你可以实现一个精美的烟花特效网页。希望这些提示可以帮到你，期待你能成功地创作出一个华丽又神奇的烟花特效网页！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值