html5 canvas全屏烟花动画特效

简介: 许多地方在春节、元宵等节日有放烟花的习俗,如果在网页上模拟烟花,以前也有一些javascript实现的效果,自从HTML5兴起之后,网页模拟烟花更加容易、逼真了。
许多地方在春节、元宵等节日有放烟花的习俗,如果在网页上模拟烟花,以前也有一些javascript实现的效果,自从HTML5兴起之后,网页模拟烟花更加容易、逼真了。

效果展示:
http://hovertree.com/texiao/html5/43/

效果图:


代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5 canvas全屏烟花动画特效 - 何问起</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/hovertree.css">
</head>
<body>
<div class="hovertree"></div>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/html5/43/js/jquery.fireworks.js"></script>
<script type="text/javascript">
    $('.hovertree').fireworks({
	  sound: true, // sound effect
	  opacity: 0.9, 
	  width: '100%', 
	  height: '100%' 
	});
</script>
    <div style="width:340px;position:fixed;z-index:99;">来源:<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/h/bjag/me34x8fk.htm">说明</a></div>
</body>
</html>
HTML5不只在图像方面有许多进步,在声音方面也有进步,本烟花特效还可以设置是否有声音效果。sound: true 或者 sound: false 。

本特效源码下载:
http://hovertree.com/h/bjag/24o31rk5.htm

HTML5的相关题目
以下不是canvas的方法是:
A、getContext()
B、fill()
C、stroke()
D、controller()
答案: http://hovertree.com/tiku/bjaf/4tlxjl9k.htm

相关效果:
http://hovertree.com/h/bjaf/epbhdsa3.htm
目录
相关文章
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
15天前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
15天前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
12天前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
2月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
2月前
|
前端开发
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
HTML+CSS动画实现动感3D卡片墙:现代Web设计的视觉盛宴
|
2月前
|
前端开发
一键复制HTML+CSS动画 打造炫酷的搜索框
一键复制HTML+CSS动画 打造炫酷的搜索框
|
2月前
|
容器
html+css动画来袭!登录人人可领
html+css动画来袭!登录人人可领
|
27天前
|
前端开发
在 HTML canvas 绘制文本
在 HTML canvas 绘制文本
12 0
|
2月前
|
移动开发 前端开发 JavaScript