文档章节

H5酷炫效果

strip_liu
 strip_liu
发布于 2017/07/09 23:55
字数 404
阅读 73
收藏 0
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>线性渐变动画</title>
    <style>
        body{
            width:100%;
            overflow:hidden;
            margin:0;
            background: hsla(0,0%,0%,1);
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var c = document.getElementById('canvas'),
            $ = c.getContext('2d'),
            w = c.width = window.innerWidth,                                //设置 Canvas 宽度(全屏)
            h = c.height = window.innerHeight,                              //设置 Canvas 高度(全屏)
            t = 0, num = 450,                                               //num = 450 绘制数量
            u = 0, _u,                                                      //线性渐变的颜色值
            s, a, b, 
            x, y, _x, _y,
            _t = 1 / 100;                                                   
            //控制摆动速度

        var anim = function() {
            $.globalCompositeOperation = 'source-over';                     //默认,在目标图像上显示源图像
            $.fillStyle = 'hsla(0, 0%, 0%, .75)';                           //填充颜色
            $.fillRect(0, 0, w, h);                                         //绘制“已填色”的矩形
            $.globalCompositeOperation = 'lighter';                         //显示源图像 + 目标图像
            for (var i = 0; i < 2; i++) {
                x = 0; _u = (u / 4)+i;
                $.beginPath();
                //循环绘制个数(num),正弦 Math.sin(弧度),余弦 Math.cos(弧度)
                for (var j = 0; j < num; j++) {
                    x -= .72 * Math.sin(4);
                    y = x * Math.sin(i + 3.0 * t + x / 20) / 2;
                    _x = x * Math.cos(b) - y * Math.sin(b);
                    _y = x * Math.sin(b) + y * Math.cos(b);
                    b = (j * 3) * Math.PI / 6.8;
                    $.lineWidth = .18;                                      //线条宽度
                    $.arc(w / 2 - _x, h / 2 -_y, .5, 0, 2 * Math.PI);       //画圆(半径0.5)
                }

                //设置线性渐变
                var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y,  0, w / 2 + _x, h / 2 + _y);
                g.addColorStop(0.0, 'hsla('+ u +',85%,50%,1)');
                g.addColorStop(0.5, 'hsla('+ _u +',85%,40%,1)');
                g.addColorStop(1, 'hsla(0,0%,5%,1)'); 
                $.strokeStyle = g;                                          //线条颜色为 g(线性渐变)
                $.stroke();
            }
            t += _t;                                                        //摆动速度会不断增加
            u -= .2;                                                        //改变颜色值
            window.requestAnimationFrame(anim);                             //绘制动画 anim
        };
        anim();

        //监听,当浏览器宽度和高度改变时,改变 Canvas 的宽度和高度
        window.addEventListener('resize', function() {
            c.width = w = window.innerWidth;
            c.height = h = window.innerHeight;
        }, false);
    </script>
</body>
</html>

静态效果图如下(没做flash)要看实际效果直接复制代码就行

 

© 著作权归作者所有

strip_liu
粉丝 1
博文 15
码字总数 4517
作品 0
德国
程序员
私信 提问
【干货】微信场景之H5页面制作免费工具大集合

营销代有手段出,各领风骚数百天。要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到“围住神经猫”,上线微信朋友圈3天的时间便创造了用户...

English0523
2015/09/23
0
0
干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田
2015/12/08
0
0
大厂h5开源视频系列-网易云音乐年度总结

前言 大厂h5开源视频系列 是一个专题,在这个专题中我们会解析一些酷酷的线上h5,在每一个细节,每一个细腻的过渡背后都能看到前端工程师付出的心血,本篇带来的是 👉👉 网易云音乐年度总...

旅梦开发团
04/16
0
0
H5开发工具推荐

H5开发工具推荐 1.易企秀 首先解释下易企秀的功能。它是一款针对移动互联网营销的手机网页DIY制作工具。 优点:1. 就算你对编程技术一窍不通,你只要通过易企秀,就能够简单轻松制作基于H5的...

MyDear宸
2017/05/11
0
0
【H5 音乐播放实例】第一节 音乐详情页制作(1)

本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面。 通过本教程,您会学到: 1、H5音乐播放 (带音轨) 2、iconfont字体图标库 3、div+css网页布局...

剽悍一小兔
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HeyUI组件库按需加载功能上线,盘点HeyUI组件库有哪些独特功能?

HeyUI组件库 如果你还不了解heyui组件库,欢迎来我们的官网或者github参观。 官网 github 当然,如果能给我们一颗✨✨✨,那是最赞的了! 按需加载 当heyui组件库的组件越来越多的时候,按需...

vvpvvp
16分钟前
3
0
Dockerfile文件详解

Dockerfile文件详解 什么是dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档。可以使用在命令行中调用任何命令。 Docker通过读取Dockerfile中的指令自动生成映像。 docker bui...

Jeam_
29分钟前
0
0
阿里云PolarDB发布重大更新 支持Oracle等数据库一键迁移上云

5月21日,阿里云PolarDB发布重大更新,提供传统数据库一键迁移上云能力,可以帮助企业将线下的MySQL、PostgreSQL和Oracle等数据库轻松上云,最快数小时内迁移完成。据估算,云上成本不到传统...

zhaowei121
37分钟前
0
0
在数据数据探索过程中的一些常用操作

###pandas在做数据探索时,分组统计均值和中位数参考资料:http://www.cnblogs.com/nxld/p/6058591.htmlhttp://python.jobbole.com/85742/按字典重新赋值,可以直接使用pandas中的repla...

KYO4321
40分钟前
0
0
好程序员分享干货 弹性分布式数据集RDD

一、RDD定义 RDD(Resilient Distributed Dataset)叫做分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变(数据和元数据)、可分区、里面的元素可并行计算的集合。其特点在于自动容...

好程序员IT
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部