做个记录，自己写的动态效果，可能以后用的着呢；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #canvas{

                margin:  auto;

                border: 1px solid #f98974;

                /*background: cornflowerblue;*/

            }

        </style>

    </head>

    <body>

        <canvas id="canvas" width="" height=""></canvas>

        <script type="text/javascript">

            var canvas = document.getElementById("canvas");

            var ctx = canvas.getContext("2d");

            var speed = ; wave = ; level = Math.PI/; wave2 = ;

            ctx.translate(,);

            ctx.lineWidth = ;

            function drawSin(speed,wave){

                ctx.beginPath();

                var gradient=ctx.createLinearGradient(,,,);

                gradient.addColorStop("","magenta");

                gradient.addColorStop("0.9","skyblue");

                ctx.strokeStyle = "rgba(51,133,254,.7)";

                ctx.fillStyle = "rgba(237,107,3,.8)";

                ctx.moveTo(,);

                for (var x=; x<; x++) {

                    var y = Math.sin(x*level+speed*)*wave;

                    ctx.lineTo(x,y);

                }

                ctx.lineTo(,)

//                ctx.stroke();

                ctx.fill();

            };

            function drawSin2(speed,wave){

                ctx.beginPath();

                ctx.strokeStyle = "yellow";

                ctx.fillStyle = "yellow";

                for (var x=; x<; x++) {

                    var y = Math.sin(x*level+speed+Math.PI/)*wave;

                    ctx.lineTo(x,y);

                }

                ctx.stroke();

                ctx.fill();

            };

            function drawSin3(speed,wave){

                ctx.beginPath();

                ctx.strokeStyle = "aliceblue";

                ctx.fillStyle = "rgba(237,107,3,.5)";

                ctx.moveTo(,);

                for (var x=; x<; x++) {

                    var y = Math.sin(x*level+speed*+Math.PI/)*wave2;

                    ctx.lineTo(x,y);

                }

                ctx.lineTo(,);

//                ctx.stroke();

                ctx.fill();

            };

            setInterval(function(){

                speed++;

                console.log(wave);

                ctx.clearRect(,-,,);

                drawSin(speed,wave);

//                drawSin2(speed,wave);

                drawSin3(speed,wave);

            },);

        </script>

    </body>

</html>

canvas绘画交叉波浪的更多相关文章

  1. Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

    Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

  2. 浅谈canvas绘画王者荣耀--雷达图

    背景: 一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息.原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画.那么问题来了, ...

  3. 开发Canvas 绘画应用（四）：实现拖拽绘画

    在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...

  4. 开发Canvas 绘画应用（三）：实现对照绘画

    需求分析 在我的毕设中,提出了视图引导的概念,由两部分功能组成: (1)可以对照着图片进行绘画,即将图片以半透明的方式呈现在绘图板上,然后用户可以对照着进行绘画: (2)可以直接将简笔画图片直接拖拽到 ...

  5. 开发Canvas 绘画应用（二）：实现绘画

    开发Canvas 绘画应用(一):搭好框架 中我们已经把基本框架及基础功能实现了,现在要实现本应用的重点:绘画功能. 首先分析一下,我们要实现绘画,需要具备的理论知识如下: (1)获取触摸点的坐标 类 ...

  6. 开发Canvas 绘画应用（一）：搭好框架

    毕业汪今年要毕业啦,毕设做的是三维模型草图检索,年前将算法移植到移动端做了一个小应用(利用nodejs搭的服务),正好也趁此机会可以将前端的 Canvas 好好学一下~~毕设差不多做完了,现将思路和代 ...

  7. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  8. Canvas绘画功能（待补充）

    由于项目的前端需要用户手绘输入,所以我们利用Canvas控件做绘画面板,并且实现了许多功能,包括手绘笔画,清空画板,上传手绘图,下载手绘图,记录用户笔画,上传背景图.以后有时间都写到这篇博客中,今天晚 ...

  9. canvas 绘画随机点

    直接看图吧: 这样的随机点,是小圆点组成的,然后一直在动,记录一下,万一以后要用到呢: canvas的具体设置我就不写了,另一篇文档里有: drawRandomDot () { let leftCan ...

随机推荐

  1. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. android(java) 开发过程中经验及总结记录

    android(java) 开发过程中经验及总结记录

  3. Win7删除网络位置那些不用的网络位置(驱动器)

    1.初始状态: 映射成功的网络位置如下图 2.要删除这个网络位置:点击"打开网络和共享中心",然后如下图设置: 3.重启电脑之后,删除的"网络位置"不会在资源管 ...

  4. (转)Python3.5 queue模块详解

    原文:https://www.cnblogs.com/CongZhang/p/5274486.html queue介绍 queue是python中的标准库,俗称队列,可以直接import 引用,在py ...

  5. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  6. Fragment中启动一个新的Activity

    最近遇到一个小问题,就是我在主界面中用的是Fragment,其中四个Fragment,然后打算在其中一个里边,写一个TextView(准确地说是Linearout)的单击事件,然后跳转到另外一个Act ...

  7. 磁盘分区以及Linux目录挂载详解

    一.背景 一直以来,对于磁盘的分区以及Linux目录挂载的概念都不是很清晰,现在趁着春暖花开周末在家没事就研究了下它们,现在来分享我的理解. 二.概念详解 1.磁盘分区 磁盘分区是把物理的磁盘空间按照 ...

  8. Linux-(ping,traceroute,ss)

    ping命令 1.命令格式: ping [参数] [主机名或IP地址] 2.命令功能: ping命令用于:确定网络和各外部主机的状态:跟踪和隔离硬件和软件问题:测试.评估和管理网络.如果主机正在运行并 ...

  9. DROP TABLE 恢复【一】

    当DROP TABLE指令敲下的时候,你很爽,你有考虑过后果么?如果该表真的没用,你DROP到无所谓,如果还有用的,这时你肯定吓惨了吧,如果你有备份,那么恭喜你,逃过一劫,如果没有备份呢?这时就该绝望 ...

  10. Percona XtraDB Cluster

    简介 Percona XtraDB Cluster是MySQL高可用性和可扩展性的解决方案,Percona XtraDB Cluster提供的特性如下: 1.同步复制,事务要么在所有节点提交或不提交. ...