Canvas-三角函数曲线图
以本图为例,要做这张图,需要一些数学知识(三角函数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-三角函数曲线图的更多相关文章
- canvas三角函数应用
这个是圆圈旋转的简单案例 var canvas=document.getElementById("canvas"); var cxt=canvas.getContext(" ...
- canvas三角函数模拟水波效果
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- canvas三角函数直线运动
var canvas = document.getElementById("canvas"); var cxt = canvas.getContext("2d" ...
- canvas三角函数做椭圆运动效果
<canvas id="canvas" width="800" height="400" style="background ...
- 安卓用canvas画曲线图
1.新建一个常变量类Constant.java package com.rain.db; import android.graphics.Point; public class Constant { ...
- Android 绘制动态图
最近准备技能大赛,需要将从传感器中读出的数据在移动客户端以图的形式绘制出来,因为平时很少绘图,于是各种查资料,算是勉强做出来了. 以下是大赛理论效果图(左)和实际效果图(右),真的是理想很丰满,现实很 ...
- canvas 五角星之回顾【初中三角函数】
当程序中遇到三角函数的时候我是懵逼的,于是百度了“初中三角函数”, 忘了这几个公式的,自己打脸. 目的是通过Canvas画一个五角星, 突破口:只要能通过给定的两个外圈点的半径,和内圈点的半径,借助上 ...
- canvas 连线曲线图封装
$.fn.hChart=function (opt) { var setting=$.extend({ className:'', data:[] },opt); var tbody=this; va ...
- canvas 连线曲线图
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...
- HTML5之Canvas绘图实例——曲线图
实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox
随机推荐
- 不懂Git,别说自己是程序猿–20分钟git快速上手(转)
在Git如日中天的今天,不懂git都不好意思跟人说自己是程序猿.你是不是早就跃跃欲试了,只是苦于没有借口(契机). 好吧,机会就在今天. 给我20分钟,是的,只要20分钟, 让你快速用上git. 我们 ...
- JS高程3:Ajax与Comet-XMLHttpRequest对象
XHR 的用法 XHR对象,即XMLHttpRequest对象,下面看看他常见的属性和方法. open()方法 它接受 3 个参数:要发送的请求的类型("get". "p ...
- Xcode7 beta 网络请求报错:The resource could not be loaded because the App Transport Security policy requir
今天升级Xcode 7.0 bata发现网络访问失败.输出错误信息 The resource could not be loaded because the App Transport S ...
- JDK 6 目录结构介绍以及JDK中的工具研究
要想深入了解Java必须对JDK的组成, 本文对JDK6里的目录做了基本的介绍,主要还是讲解 了下JDK里的各种可执行程序或工具的用途 Java(TM) 有两个平台 JRE 运行平台,包括Jav ...
- centos单机安装Hadoop2.6
一,安装环境 硬件:虚拟机 操作系统:Centos 6.4 64位 IP:10.51.121.10 主机名:datanode-4 安装用户:root 二,安装JDK 安装JDK1.6或者以上版本.这里 ...
- Python 中 global、nonlocal的使用
1.在学习python过程中很重要的一点需要记住:如果在函数内部定义了跟全局变量同名的变量,那么该变量将是局部变量,而全局变量的引用在该函数范围内将失效. x = 9 def a(): x = 10 ...
- esp8266必备知识
gpio定义 RX和TX为D9和D10
- php 扩展模块添加
1. 新增安装扩展模块的位置 [root@node_22 ~]# ls /usr/local/php7/lib/php/extensions/no-debug-non-zts-20151012/ op ...
- php中的 file_get_contents(‘php://input’)
今天用CI框架整合微信发现了一个没见过的 file_get_contents('php://input'); 这个家伙是干嘛用的,然后自己直接写了验证的代码.好吧 废话不多说直接看下面的代码. < ...
- Java技术学习路线图
一:常见模式与工具 学习Java技术体系,设计模式,流行的框架与组件是必不可少的: 常见的设计模式,编码必备 Spring5,做应用必不可少的最新框架 MyBatis,玩数据库必不可少的组件 二:工程 ...