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

<!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. 使用pymysql

    安装 pip3 install pymysql 连接.执行sql.关闭(游标) import pymysql mysql_connect_dict={ 'host':'127.0.0.1', 'por ...

  2. static、final、static final的区别

    final: final可以修饰属性,方法,类,局部变量(方法中的变量) final修饰的属性的初始化可以在编译期,也可以在运行期,初始化后不能被改变. final修饰的属性跟具体对象有关,在运行期初 ...

  3. swiper4-vue 不使用loop,由最后一张跳到第一张

    <template> <div class="swiper-box"> <div class="swiper-container" ...

  4. easyui datebox 只选择月份的方法

    easyui datebox 只选择月份的方法 效果如下图: 代码如下: <html > <head> <meta charset="utf-8"&g ...

  5. Identity Server4学习系列三

    1.简介 在Identity Server4学习系列一和Identity Server4学习系列二之令牌(Token)的概念的基础上,了解了Identity Server4的由来,以及令牌的相关知识, ...

  6. web的脚本安全-CSRF

    CSRF,即Cross-site request forgery,中文一般叫跨站请求伪造. 攻击原理是,用户在A网站(登录,之后打开一个B网站,B网站的脚本(或HTML标签)向A网站发送一个请求,这个 ...

  7. 学会四招让你在linux下安装程序变得简单

    一.背景 由于最近想自己摸索一些linux下的东西,开始玩起了Linux系统,在安装软件的过程中有诸多的不解和困惑,现在终于搞明白了具体是怎么样的安装步骤和过程,先分享给你们同时也方便自己复习查阅. ...

  8. [Java初探实例篇02]__流程控制语句知识相关的实例练习

    本例就流程控制语句的应用方面,通过三个练习题来深入学习和巩固下学习的流程控制语句方面的知识,设计到,if条件判断语句,switch多分支语句,for循环语句及其嵌套多层使用,while循环语句. 练习 ...

  9. logstash-1-安装配置

    centos logstash logstash logstash是什么呢, 他是一个数据管道, JRuby编写的运行在java虚拟机的具有收集, 分析和转发数据流功能的工具 特性: 安装 1), w ...

  10. mysql索引总结(4)-MySQL索引失效的几种情况

    mysql索引总结(1)-mysql 索引类型以及创建 mysql索引总结(2)-MySQL聚簇索引和非聚簇索引 mysql索引总结(3)-MySQL聚簇索引和非聚簇索引 mysql索引总结(4)-M ...