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

<!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. D14——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D14 20180919内容纲要: 1.html认识 2.常用标签 3.京东html 4.小结 5.练习(简易淘宝html) 1.html初识(HyperText ...

  2. Smart/400开发上手1:入门

    1.介绍 Smart/400是在AS/400之上的开发平台,管理开发.运维的全生命周期. 2.设计基础 Introducing Fields Smart通过字段字典Field Dictionary来存 ...

  3. psutil 跨平台根据程序名杀进程

    笔者在项目中遇到过需要根据进程名杀进程的需求,利用python库psutil实现了此功能. 模块地址: https://pypi.python.org/pypi/psutil/   psutil功能 ...

  4. ORA-01113 & ORA-01110同时出现

    \NOARCHIVED LOG , 没备份 , Redo Log 被覆盖 , 某个datafile不能online 设计知识点:BBED> set block 1BBED> p kcvfh ...

  5. 06-03 Java 面向对象思想概述、开发设计特征，类和对象的定义使用，对象内存图

    面向对象思想概述.开发设计特征 1:面向对象思想 面向对象是基于面向过程的编程思想. 面向过程:强调的是每一个功能的步骤 面向对象:强调的是对象,然后由对象去调用功能 2:面向对象的思想特点 A:是一 ...

  6. 线程中的定时器Timer类

    Timer 定时器 几分钟之后执行一个任务. 创建了一个定时器相当于开启了一条线程,TimerTask相当于一个线程的任务.内部使用wait/notify机制来实现的. 用法非常的简单  就足以里面的 ...

  7. (转)python WSGI框架详解

    原文:https://www.cnblogs.com/shijingjing07/p/6407723.html?utm_source=itdadao&utm_medium=referral h ...

  8. windows cmd窗口提示“telnet”命令不能内部或外部命令，也不是可运行的程序

    windows cmd窗口提示“telnet”命令不能内部或外部命令,也不是可运行的程序 原因:C:\Windows\System32目录下没有telnet.exe,path系统变量的值包含了C:\W ...

  9. Java总结：开发环境

    更多请查看在线文集:http://android.52fhy.com/java/index.html Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言 ...

  10. 解读Secondary NameNode的功能

    1.概述 最近有朋友问我Secondary NameNode的作用,是不是NameNode的备份?是不是为了防止NameNode的单点问题?确实,刚接触Hadoop,从字面上看,很容易会把Second ...