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

<!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. JQuery 限制文本输入只能输入数字（可自定义正则表达式）

    var JVerify = { role: { number: /[0-9\/]/, decimal: /[0-9\.\/]/, code: /[0-9A-Z]/ }, Verify: functio ...

  2. KMP算法的next函数求解和分析过程

    转自 wang0606120221:http://blog.csdn.net/wang0606120221/article/details/7402688 假设KMP算法中的模式串为P,主串为S,那么 ...

  3. 一、Linq简介

    语言集成查询Language Integrated Query(LINQ)是一系列将查询功能集成到C#语言的技术统称. 传统数据查询的缺点: 简单的字符串查询,没有编译时类型检查或Intellisen ...

  4. 深入聊聊Java多线程

    一.背景 在没有学习Java多线程以前,总觉得多线程是个很神秘的东西,只有那些大神才能驾驭,新年假期没事就来学习和了解一下Java的多线程,本篇博客我们就来从头说一下多线程到底是怎么回事. 二.概述 ...

  5. JavaScript -- FileSystemObject-文件夹

    -----057-FileSystemObject-文件夹.html----- <!DOCTYPE html> <html> <head> <meta htt ...

  6. jsp链接orcl

    自己整的!好用滴!!希望能帮到一些初学者! package lobsterwwww; import java.sql.Connection; import java.sql.DriverManager ...

  7. Django model转字典的几种方法

    平常的开发过程中不免遇到需要把model转成字典的需求,尤其是现在流行前后端分离架构,Json格式几乎成了前后端之间数据交换的标准,这种model转dict的需求就更多了,本文介绍几种日常使用的方法以 ...

  8. 阿里2015校招面试回忆录（成功拿到offer）

    1. 引言 继上次“百度2015校园招聘面试题回忆录(成功拿到offer)”文章过后,大家都希望除了题目之外,最好能给出自己当时的回答情况,看看有没有什么回答技巧,这样更有参考价值. 嗯,建议的很对, ...

  9. Java 容器源码分析之Queue

    简介 Queue是一种很常见的数据结构类型,在java里面Queue是一个接口,它只是定义了一个基本的Queue应该有哪些功能规约.实际上有多个Queue的实现,有的是采用线性表实现,有的基于链表实现 ...

  10. Servlet中forward和redirect的区别

    forward方式:request.getRequestDispatcher("/somePage.jsp").forwardrequest, response);      re ...