html5圆圈,HTML5动感圆圈

一、准备工作

本demo使用HTML5进行实现，在主流浏览器上运行即可。为了保证平台兼容性，我使用了lufylegend引擎，不过渲染部分用的是原生代码，事件、适配等用的是引擎提供的API。引擎地址：http://lufylegend.com/lufylegend

二、程序实现

本案例主要修改Main.js文件实现效果。

Main.js核心代码如下(其中c是CanvasRenderingContext2D对象)：for (var i = 1; i <= 60; i++) {

var angle = i * 6 / 180 * Math.PI;

var r = Math.abs(30 * (pull + Math.sin((twist * 6 * (i + timer * 2) / 180 * Math.PI))));

r = r % 60;

var d = (2 + shout) * (60 - shout * r),

x = d * Math.cos(angle),

y = d * Math.sin(angle);

c.save();

c.beginPath();

c.fillStyle = getColor();

c.globalAlpha = r / 100;

c.arc(x, y, r, 0, Math.PI * 2);

c.fill();

c.restore();

}

可以看到，我们首先通过循环创建60个圆圈，然后使用绝对值，正弦等数学计算方式来获取每个圆圈的半径，并根据半径来确定x、y坐标。其中c为画布对象，twist、shout、pull等都是运动轨迹计算时的参数，timer就是从效果开始播放后的到现在所用时间，相当于物理v-t图中的自变量t。

至于这些参数的变化和timer的变化，我把他们放在了时间轴事件中。具体的实现代码可以下载后参看。

三、运行效果

四、文件截图

双击index.html可运行看效果。

五、其他补充

本demo的灵感来自于scratch网站上一位国外大牛的作品。我在他的创意之上进行改进得到这个demo。

html5圆圈,HTML5动感圆圈相关推荐

兄弟连html5在线画板,IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容
原标题:IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容为了保证HTML5能与之前的HTML版本达到最大的兼容,HTML5对一些元素标记的省略.boolean值的属性,以及引号的省略这几 ...
对html5的了解,HTML5——对HTML5的认识
首先非常感谢李刚老师出的这本书<HTML5/CSS3/JavaScript讲义>,今天读了第一章节的内容,趁热打铁,总结一下. HTML5的时代已经到来,它对所有的前端开发人员来说是一种福 ...
html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生
原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...
下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单多样的输入类型1...
原标题:IT兄弟连 HTML5教程 HTML5表单多样的输入类型1 HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可 ...
这不仅仅是html5的HTML5问题
这不仅仅是html5的HTML5问题,它还关系到了我们应该如何工作这类原则性的问题,css working group更青睐于使用www-风格的输入.因为目标人群是web开发者,所以lea并不担心向后 ...
css html5简介,HTML5 简介......
HTML5 示例实例 Your browser does not support the video tag. 什么是 HTML5? HTML5 简介 HTML5 是最新的 HTML 标准. HTM ...
html5代码好学吗,0基础能学习Html5吗?Html5好学吗？
原标题:0基础能学习Html5吗?Html5好学吗? 0基础可以学习Html5吗?这两年一直是被挂在嘴边的话题,随着人们对用户体验的要求越来越高,前端开发技术难度越来越大,所以对于IT从业者来讲,前端 ...
免费html5代码,HTML5(示例代码)
一.什么是HTML5 1.1 HTML5 简介万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素.属性和行为 XHTML可扩展 ...
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se ...
一个html基本写法,HTML5教程:HTML5的基础写法
HTML5教程:HTML5的基础写法对比一下XHTML 1.0 Transitional的规范,html5基本上没有XHTML 1.0 Transitional严格的要求,并且简化了很多东西. •文 ...

html5圆圈,HTML5动感圆圈

html5圆圈,HTML5动感圆圈相关推荐

最新文章

热门文章