以本图为例，要做这张图，需要一些数学知识（三角函数sin，cos），有canvas的基础知识

Html

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="Script/jquery-1.10.2.js"></script>

    <script src="Script/testStudy.js"></script>

</head>

<body style="width:100%; height:100%;">

    <canvas id="study" width="600" height="360">您的浏览器不支持 HTML5 canvas 标签。</canvas>

    <script>

        curve();

    </script>

</body>

</html>

JavaScript

var curve = function () {

    var c = document.getElementById("study");

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

    //线条主色

    var mianColor = "#e2dedb"

    //画图函数

    var Drawing = {

        line: function (starxy, endxy, lineWidth, color) {

            ctx.strokeStyle = color;

            ctx.lineWidth = lineWidth;

            ctx.beginPath();

            ctx.moveTo(starxy[0], starxy[1]);

            ctx.lineTo(endxy[0], endxy[1]);

            ctx.stroke();

        },

        ract: function (starxy, ractWH, color) {

            ctx.fillStyle = color;

            ctx.fillRect(starxy[0], starxy[1], ractWH[0], ractWH[1]);

        },

        ractBorder: function (starxy, ractWH, color, lineWidth) {

            ctx.lineWidth = lineWidth;

            ctx.strokeStyle = color;

            ctx.strokeRect(starxy[0], starxy[1], ractWH[0], ractWH[1]);

        },

        /*Drawing.triCurve(triangle, star, cp, color)

          triangle:三角函数

          star：{x：开始x坐标，y：开始的y坐标}

          cp：{xw：控制x的宽度，yh：控制y的高度，s：位移}

          color：线条颜色

        */

        triCurve: function (triangle, star, cp, color) {

            ctx.strokeStyle = color;

            ctx.beginPath();

            ctx.moveTo(star.x, star.y);

            //中心判断

            var change = false;

            //中点计算

            var count = cp.yh;

            for (var i = cp.s; i * cp.xw - cp.xw * cp.s + star.x < 600 ; i += 0.1) {

                count += 0.5;

            }

            var center = parseInt(count / 2);

            //三角函数曲线

            for (var i = cp.s; i * cp.xw - cp.xw * cp.s + star.x < 600; i += 0.1) {

                if (change === false && cp.yh < center) { cp.yh += 0.5; }

                if (change === false && cp.yh === center) { change = true; cp.yh -= 0.5; }

                if (change === true && cp.yh < center) { cp.yh -= 0.5; }

                var x = i * cp.xw - cp.xw * cp.s + star.x;

                var y = Math[triangle](i * cp.angle) * cp.yh + star.y;

                ctx.lineTo(x, y);

            }

            ctx.stroke();

            ctx.closePath();

        },

    }

    //背景填充

    Drawing.ract([0, 0], [600, 360], "#333333");

    //播放条

    var play = function (btn) {

        ctx.clearRect(0, 0, 600, 130);

        Drawing.ract([0, 0], [600, 130], "#333333");

        var playLineStar = [93, 105];

        var playLineWH = [494, 105];

        var playBtnWH = [11, 21];

        Drawing.line(playLineStar, playLineWH, 4, mianColor);

        var playBtnStarX;

        var playBtnStarY = playLineWH[1] - playBtnWH[1] / 2;

        btn == undefined ? playBtnStarX = (playLineWH[0] + playLineStar[0]) / 2 - playBtnWH[0] / 2 : playBtnStarX = 4 * btn + playLineStar[0];

        Drawing.ractBorder([playBtnStarX, playBtnStarY], playBtnWH, "#9d9996", 1);

        Drawing.ract([playBtnStarX += 1, playBtnStarY += 1], [playBtnWH[0] - 2, playBtnWH[1] - 2], mianColor);

    }

    play();

    //鼠标滚动控制播放条

    var waveGo;

    var distance = 0;

    var scrollFunc = function (e) {

        e = e || window.event;

        var mouseMove;

        e.wheelDelta ? mouseMove = e.wheelDelta : mouseMove = e.detail;

        if (mouseMove > 0) {

            distance += 5;

            if (distance >= 100) distance = 100;

        }//up

        if (mouseMove < 0) {

            distance -= 5;

            if (distance <= 0) distance = 0;

        }//down

        play(distance);

        clearInterval(waveGo);

        waveGo = setInterval(function () {

            wave(distance);

        }, 100)

    }

    if (document.addEventListener) {//firefox

        document.addEventListener('DOMMouseScroll', scrollFunc, false);

    }

    window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome

    //三角函数曲线动画

    var dong = 1, time = 1000 / 60, cango;

    var wave = function (ad) {

        var adjust;

        ad == undefined ? adjust = 28 : adjust = ad + 15 >= 100 ? 100 : ad + 15;

        console.log(adjust);

        ctx.clearRect(0, 130, 600, 360);

        Drawing.ract([0, 130], [600, 360], "#333333");

        if (dong === 1) { cango = false; }

        if (!cango && dong < 3) { dong += 1; }

        if (dong === 3) { cango = true; }

        if (cango && dong <= 3) { dong -= 1; }

        time++;

        Drawing.triCurve("sin", { x: 0, y: 238 }, { xw: adjust, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#ffffff");

        Drawing.triCurve("cos", { x: 0, y: 238 }, { xw: adjust + 12, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#424242");

        Drawing.triCurve("sin", { x: 0, y: 238 }, { xw: adjust + 22, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#5e5e5e");

        Drawing.triCurve("cos", { x: 0, y: 238 }, { xw: adjust + 22, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#a2a2a2");

        Drawing.triCurve("sin", { x: 0, y: 238 }, { xw: adjust, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#9a9a9a");

    }

    waveGo = setInterval(wave, 100)

}

最终一开始出来呈现的图像应该是，播放条居中，曲线图与实例图相似。

而我们的播放条，简单实现了利用鼠标滚动去控制曲线图的弯曲幅度。

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6369905.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接

Canvas-三角函数曲线图的更多相关文章

  1. canvas三角函数应用

    这个是圆圈旋转的简单案例 var canvas=document.getElementById("canvas"); var cxt=canvas.getContext(" ...

  2. canvas三角函数模拟水波效果

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  3. canvas三角函数直线运动

    var canvas = document.getElementById("canvas"); var cxt = canvas.getContext("2d" ...

  4. canvas三角函数做椭圆运动效果

    <canvas id="canvas" width="800" height="400" style="background ...

  5. 安卓用canvas画曲线图

    1.新建一个常变量类Constant.java package com.rain.db; import android.graphics.Point; public class Constant { ...

  6. Android 绘制动态图

    最近准备技能大赛,需要将从传感器中读出的数据在移动客户端以图的形式绘制出来,因为平时很少绘图,于是各种查资料,算是勉强做出来了. 以下是大赛理论效果图(左)和实际效果图(右),真的是理想很丰满,现实很 ...

  7. canvas 五角星之回顾【初中三角函数】

    当程序中遇到三角函数的时候我是懵逼的,于是百度了“初中三角函数”, 忘了这几个公式的,自己打脸. 目的是通过Canvas画一个五角星, 突破口:只要能通过给定的两个外圈点的半径,和内圈点的半径,借助上 ...

  8. canvas 连线曲线图封装

    $.fn.hChart=function (opt) { var setting=$.extend({ className:'', data:[] },opt); var tbody=this; va ...

  9. canvas 连线曲线图

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...

  10. HTML5之Canvas绘图实例——曲线图

    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox

随机推荐

  1. 弹出键盘windowsoftinputmode属性设置值

    windowSoftInputMode属性设置值 2012-08-30 16:49 1592人阅读 评论(0) 收藏 举报 androidattributes活动 (1).AndroidManifes ...

  2. python 高级语法

    #coding:utf-8 #定义一个装饰器函数 def doc_func(func): #包裹函数(闭包) def warpfunc(): #做一些额外的事情 print "%s call ...

  3. python3安装scrapy问题解决

    scrapy py3.5安装 pip install scrapy 直接安装失败 第一个错误 building 'lxml.etree' extension 使用 pip install lxml 安 ...

  4. Microsoft SQL Server Data Tools - Business Intelligence for Visual Studio 2013 SSIS

    VS2012 SSDTBI_VS2012_x86_CHS.exe http://www.microsoft.com/zh-CN/download/details.aspx?id=36843 VS201 ...

  5. Atitit. 软件开发中的管理哲学--一个伟大的事业必然是过程导向为主 过程导向 vs 结果导向

    Atitit. 软件开发中的管理哲学--一个伟大的事业必然是过程导向为主    过程导向 vs 结果导向 1. 一个伟大的事业必然是过程导向为主 1 1.1. 过程的执行情况(有明确的执行手册及标准) ...

  6. iOS 图片的属性

    UIViewContentModeScaleToFill UIViewContentModeScaleAspectFit UIViewContentModeScaleAspectFill UIView ...

  7. Docker使用Dockerfile创建支持ssh服务自启动的容器镜像

    原文链接:Docker使用Dockerfile创建支持ssh服务自启动的容器镜像 1. 首先创建一个Dockerfile文件.文件内容例如以下 # 选择一个已有的os镜像作为基础 FROM cento ...

  8. 真正理解红黑树，真正的(Linux内核里大量用到的数据结构，且常被二货问到)

    作为一种数据结构.红黑树可谓不算朴素.由于各种宣传让它过于神奇,网上搜罗了一大堆的关于红黑树的文章,不外乎千篇一律,介绍概念,分析性能,贴上代码,然后给上罪恶的一句话.它最坏情况怎么怎么地...    ...

  9. android studio - installation failed with message Invalid File

    今天将windows上的as项目移动到mac下,使用mac下的as编译时出现下列错误: 解决办法: 1.点击工具栏上的Build中的Clean Project 2.再点击工具栏上的Build中的Reb ...

  10. 新标准C++程序设计读书笔记_类和对象

    面向对象的程序设计方法 抽象:将某类客观事物共同特点(属性)归纳出来,形成一个数据结构(可以用多个变量描述事物的属性):将这类事物所能进行的行为也归纳出来,形成一个个函数,这些函数可以用来操作数据结构 ...