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

<!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. django操作memcached

    1.首先需要在settings.py中配置好缓存 CACHES = { 'default': { 'BACKEND': 'django.core.cache.backends.memcached.Me ...

  2. 使用Svn的版本号[转载]

    1. 生成一个名为autover的项目 注意项目的Properties文件夹下有一个名为AssemblyInfo.cs的文件,autover程序的版本号就写在它里面. 2. 创建模板文件 在Windo ...

  3. Spring Cloud Eureka

    搭建服务注册中心 创建eureka-center,pom.xml如下: <?xml version="1.0" encoding="UTF-8"?> ...

  4. JavaScript -- Style

    -----055-Style.html----- <!DOCTYPE html> <html> <head> <meta http-equiv="c ...

  5. Vue笔记：webpack项目vue启动流程

    VUE启动流程 1. package.json 在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称 ...

  6. linux内核学习之全局描述符表(GDT)(二)

    来源:https://www.cnblogs.com/longintchar/p/5224406.html 在进入保护模式之前,我们先要学习一些基础知识.今天我们看一下全局描述符表(Global De ...

  7. springboot 入门

    使用maven构建project项目, 配置aliyun仓库, 不赘述 springboot 版本需要: jdk1.7+, maven3.2+ , gradle2.9+ 配置文件 引入父包, 放在&l ...

  8. 数据绑定到ADO.NET

    // Define a DataSet with a single DataTable. DataSet dsInternal = new DataSet(); dsInternal.Tables.Ad ...

  9. 复刻smartbits的国产网络测试工具minismb功能特点-如何加载、发送PCAP数据包

    复刻smartbits的网络性能测试工具minismb,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太网测试工具测试任何ip网络设备的端口吞吐率,带宽,并发 ...

  10. 软件架构设计学习总结（19）：详解分布式系统中的session同步问题

    几周前,有个盆友问老王,说现在有多台服务器,怎么样来解决这些服务器间的session同步问题?老王一下就来精神了,因为在n年以前,老王还在学校和几个同学一起所谓创业的时候,也遇到了类似的问题.当时查了 ...