用canvas实现html网页的动画背景

最新推荐文章于 2023-07-07 12:00:00 发布

chenjuannie3849

最新推荐文章于 2023-07-07 12:00:00 发布

阅读量603

点赞数

原文链接：https://my.oschina.net/tcxu/blog/1525943

版权

画五角星

建立一个样品五角星多边形。其中心，与坐标原点重合。将多边形顶点的坐标数据，存入两个数组：

var x=new Array(0,12,54,18,28,0,-28,-18,-54,-12,0); //坐标x数据数组
var y=new Array(-53,-17,-17,1,45,19,45,1,-17,-17,-53); //坐标y数据数组

将五角星多边形放大或缩小到给定的尺寸，
平移坐标轴，将五角星放到给定位置，
必要时，顺时针或逆时针旋转五角星多边形30度
每次画完一个五角星，必须还原绘图环境，即，使得坐标系回复初始状态。
五角星画在数据层dataLayer。

z-index 的使用

用 z-index 将非背景内容(数据 data)放在上层（dataLayer），用canvas画的动画背景，放在下一层（backLayer），以显示具有动画背景的网页。不同的层次，则通过 CSS(Cascading Style Sheet)的可用属性 z-index的不同数值，来安排。比如，若上层z-index 的属性值取2，下层则取1.

#dataLayer {
z-index:2;
....
} 

#backLayer {
z-index:1;
.....
}

背景层的实现

用从红色(red)，分10步，线性渐变到深棕色 (brown) 的移动背景(moving “LinearGradient”) 模拟旗帜飘荡，将这个效果，安排的最低层。

参见：http://runjs.cn/detail/w7uassdu

代码如下：

<html>
<head>
<script>
var col=new Array("red","brown");
var ticker=0;
var step=0;
function drawBackground(){ //画最底层
var g=document.getElementById("backLayer").getContext("2d");
//用不断自增的ticker,造成'LinearGradient'背景的平移
var grd=g.createLinearGradient(-560+ticker, 0, 1400+ticker,0);
// 背景分10步，由red渐变到brown
for (var i=0; i<10; i++)
grd.addColorStop(i/10,col[(i + step)%col.length]);
ticker=ticker+10;
if (ticker>=196){
	ticker=0;
	step++;
	}
g.fillStyle=grd;
g.fillRect(0,0,1600,700);
}

function preperation(){
	//设定底层动画每0.1秒更新一次
	setInterval('drawBackground()',100);
  }
</script>
<style type="text/css">
#dataLayer{
 z-index:2;	
 position:absolute; left:0px; top:-5px;
}
#backLayer{
	z-index:1;
	position:absolute;
	left:0px;
	top:0px;
}
</style>
</head>
<body onLoad="preperation()">
<canvas id="dataLayer" width="900" height="600" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="backLayer" width="900" height="600" ></canvas>
<script>
var x=new Array(0,12,54,18,28,0,-28,-18,-54,-12,0);    //五角星样品坐标xx数组
var y=new Array(-53,-17,-17,1,45,19,45,1,-17,-17,-53); //五角星样品坐标y数组

var c=document.getElementById("dataLayer");
var ctx=c.getContext("2d"); //获得画笔
//样品数组x轴坐标 a , 和y轴坐标 b
//指定位置[locationX,locationY]
//真实五角星的大小，与样品五角星尺寸之比 f
//五角星画完后，旋转的角度 rotation
function star(a,b,locationX,locationY,f,rotation){
ctx.save();//记录画图（画笔）的初始环境
ctx.translate(locationX,locationY);
ctx.rotate(rotation*Math.PI/180.0);
ctx.beginPath();
ctx.moveTo(Math.round(a[0]*f),Math.round(b[0]*f));
for (var i=1;i<a.length;i++)
ctx.lineTo(Math.round(a[i]*f),Math.round(b[i]*f));
ctx.closePath();
ctx.fillStyle="yellow";
ctx.fill();
ctx.restore();//还原画图（画笔）的初始环境
}
star(x,y,165,165,1.4,0);//画大五角星
star(x,y,301,65,0.5,30);//画小五角星
star(x,y,362,126,0.5,-30);//画小五角星
star(x,y,359,216,0.5,0);//画小五角星
star(x,y,301,273,0.5,30);//画小五角星
</script>
</body>
</html>

转载于:https://my.oschina.net/tcxu/blog/1525943

chenjuannie3849

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas实现html网页的动画背景

画五角星建立一个样品五角星多边形。其中心，与坐标原点重合。将多边形顶点的坐标数据，存入两个数组： var x=new Array(0,12,54,18,28,0,-28,-18,-54,-12,0); //坐标x数据数组 var...
复制链接

扫一扫