文档章节

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

tcxu
 tcxu
发布于 2017/08/30 10:02
字数 778
阅读 194
收藏 1

画五角星

  • 建立一个样品五角星多边形。其中心,与坐标原点重合。将多边形顶点的坐标数据,存入两个数组:
  1.         var x=new Array(0,12,54,18,28,0,-28,-18,-54,-12,0);     //坐标x数据数组
  2.         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>

 

© 著作权归作者所有

tcxu

tcxu

粉丝 64
博文 6
码字总数 5126
作品 0
海淀
其他
私信 提问
16 款加速编码的 HTML5 在线工具

HTML5 是在开发者和设计者之间最流行的语言之一,提供了大量的功能来帮助开发者们快速的设计 web 应用。HTML5 有很多特性,例如支持现代化的浏览器(比如:Firefox 6,Google Chrome,IE9 等...

oschina
2014/01/20
4.3K
3
程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端
2017/12/04
0
0
程序猿必备的10款超有趣的SVG绘制动画赏析

  SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们...

爱前端
2017/12/05
0
0
推荐8款HTML5相关的特殊效果

HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术...

gbin1
2014/03/26
456
0
Google LOGO的CSS Sprite

css-sprite 为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰,Google Doodle推出了一款极其炫酷的LOGO,整个LOGO使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,实现了动画,而...

bestvist
2017/11/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.7K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部