使用canvas实现360水球波动
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
#circular {
position: absolute;
left: 500px;
top: 400px;
}
#canvas_dom {
position: absolute;
left: 500px;
top: 100px;
}
</style>
</head>
<body style="background-color: #0020cad6;">
<canvas id="circular" width="1000" height="1000">当前浏览器不支持canvas请升级！</canvas>
<canvas id="canvas_dom" width="1000" height="1000"></canvas>
</body>
<script>
canvas = document.getElementById("circular");
ctx = canvas.getContext("2d");
canvas.width = 800;
oH = canvas.height = 800;
// 线宽
lineWidth = 2;
// 大半径
r = (canvas.width / 2);
cR = r - 10 * lineWidth;
ctx.beginPath();
ctx.lineWidth = lineWidth;
// 水波动画初始参数
axisLength = 2 * r - 16 * lineWidth;
// Sin 图形长度
unit = axisLength / 9;
// 波浪宽
range = .3
// 浪幅
nowrange = range;
xoffset = 8 * lineWidth;
// 数据量
sp = 0;
// 周期偏移量
nowdata = 0;
waveupsp = 0.006;
// 水波上涨速度
// 圆动画初始参数
arcStack = [];
// 圆栈
bR = r - 8 * lineWidth; soffset = -(Math.PI / 2);
// 圆动画起始位置
circleLock = true;
// 起始动画锁 // 获取圆动画轨迹点集
for (var i = soffset; i < soffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) {
arcStack.push([r + bR * Math.cos(i), r + bR * Math.sin(i)])
}
// 圆起始点
cStartPoint = arcStack.shift();
ctx.strokeStyle = "#1c86d1";
ctx.moveTo(cStartPoint[0], cStartPoint[1]);
// 开始渲染
render();
var data = 0.5;
setInterval(function(){
data = Math.round(Math.random()*10) /10;
}, 2000);
function drawSine() {
ctx.beginPath();
ctx.save();
var Stack = [];
// 记录起始点和终点坐标
for (var i = xoffset; i <= xoffset + axisLength; i += 20 / axisLength) {
var x = sp + (xoffset + i) / unit;
var y = Math.sin(x) * .2;
var dx = i;
var dy = 2 * cR * (1 - nowdata) + (r - cR) - (unit * y);
ctx.lineTo(dx, dy);
Stack.push([dx, dy])
}
// 获取初始点和结束点
var startP = Stack[0]
var endP = Stack[Stack.length - 1]
ctx.lineTo(xoffset + axisLength, canvas.width);
ctx.lineTo(xoffset, canvas.width);
ctx.lineTo(startP[0], startP[1]);
//水波的颜色 // 创建渐变
var grd=ctx.createLinearGradient(0,0,0,canvas.width);
grd.addColorStop(0.3,"red");
grd.addColorStop(0.3,"#EEA2AD");
grd.addColorStop(0.5,"blue");
grd.addColorStop(0.7,"#D8BFD8");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fill();
ctx.restore();
}
function drawText() {
ctx.globalCompositeOperation = 'source-over';
var size = 0.2 * cR;
ctx.font = 'bold ' + size + 'px Microsoft Yahei';
txt = (nowdata.toFixed(2) * 100).toFixed(0) + '%';
var fonty = r + size / 2;
var fontx = r - size * 0.8;
//字体颜色
ctx.fillStyle = "#00FA9A";
ctx.textAlign = 'center';
ctx.fillText(txt, r + 5, r + 5)
} //最一层
function drawCircle() {
ctx.beginPath();
ctx.lineWidth = 0;
ctx.strokeStyle = '#00FFFF';
//不要直接
ctx.arc(r, r, cR + 7, 0, 2 * Math.PI);
ctx.stroke();
ctx.restore();
}
//第二层
function grayCircle() {
ctx.beginPath();
//宽度
ctx.lineWidth = 12;
//颜色
ctx.strokeStyle = '#7FFFAA';
ctx.arc(r, r, cR - 5, 0, 2 * Math.PI);
ctx.stroke();
ctx.restore();
ctx.beginPath();
}
//第二层进度圈
function orangeCircle() {
ctx.beginPath();
//宽度
ctx.lineWidth = 2;
ctx.strokeStyle = '#af1cd1';
//使用这个使圆环两端是圆弧形状
ctx.lineCap = 'round';
ctx.arc(r, r, cR - 5, - (Math.PI / 2) , (nowdata * 360) * (Math.PI / 180.0) - (Math.PI / 2));
ctx.stroke();
ctx.save()
} //裁剪中间水圈
function clipCircle() {
ctx.beginPath();
ctx.arc(r, r, cR - 15, 0, 2 * Math.PI, false);
ctx.clip();
}
//外员动态
function wytd(){
init_angle = 0;
var small_x = Math.cos(init_angle)*80;
var small_y = Math.sin(init_angle)*80;
ctx.beginPath();
ctx.translate(small_x,0);
ctx.arc(0,0,10,0,Math.PI*2);
ctx.closePath();
ctx.fill();
ctx.restore();
init_angle = init_angle + Math.PI*2/360;
if(init_angle >2 ){
init_angle = 0;
}
} //渲染canvas
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCircle();
grayCircle();
//橘黄色进度圈//
orangeCircle();
//裁剪中间水圈
clipCircle();
let aa = 10;
if (data >= 0.85) {
if (nowrange > range / 4) {
var t = range * 0.01;
nowrange -= t;
}
} else if (data <= 0.1) {
if (nowrange < range * 1.5) {
var t = range * 0.01;
nowrange += t;
}
} else {
if (nowrange <= range) {
var t = range * 0.01;
nowrange += t;
}
if (nowrange >= range) {
var t = range * 0.01;
nowrange -= t;
}
}
if ((data - nowdata) > 0) {
nowdata += waveupsp;
}
if ((data - nowdata) < 0) {
nowdata -= waveupsp
}
sp += 0.07;
drawSine(); // 写字
drawText();
requestAnimationFrame(render)
}
</script>
<script type="text/javascript">
var canvas_dom = document.getElementById("canvas_dom");
var ctxfs = canvas_dom.getContext('2d');
var unit_angle = Math.PI*2/360;
var init_angle = 0;
function draw(){
//清除位置
ctxfs.clearRect(0,0,canvas_dom.width,canvas_dom.height);
//第一个
ctxfs.save();
ctxfs.translate(500,300);
ctxfs.fillStyle = "red";
ctxfs.beginPath();
ctxfs.arc(300,0,70,0,Math.PI*2,false);
ctxfs.closePath();
ctxfs.fill();
var small_x = Math.cos(init_angle)*80;
var small_y = Math.sin(init_angle)*80;
ctxfs.beginPath();
//只需要修改后面参数
ctxfs.translate(small_x,20);
//arc(移动左右位置,移动上下位置,大小,不需要修改,不需要修改) a
ctxfs.arc(200,10,15,0,Math.PI*2);
ctxfs.closePath();
ctxfs.fill();
ctxfs.restore();
init_angle = init_angle + unit_angle;
//第二个
ctxfs.save();
ctxfs.translate(650,600);
ctxfs.fillStyle = "red";
ctxfs.beginPath();
ctxfs.arc(300,0,70,0,Math.PI*2,false);
ctxfs.closePath();
ctxfs.fill();
var small_x = Math.cos(init_angle)*80;
var small_y = Math.sin(init_angle)*80;
ctxfs.beginPath();
ctxfs.translate(small_x,0);
ctxfs.arc(170,20,10,0,Math.PI*2);
ctxfs.closePath();
ctxfs.fill();
ctxfs.restore();
//第三个
ctxfs.save();
ctxfs.translate(650,900);
ctxfs.fillStyle = "red";
ctxfs.beginPath();
ctxfs.arc(300,0,50,0,Math.PI*2,false);
ctxfs.closePath();
ctxfs.fill();
var small_x = Math.cos(init_angle)*80;
var small_y = Math.sin(init_angle)*80;
ctxfs.beginPath();
ctxfs.translate(small_x,0);
ctxfs.arc(170,20,10,0,Math.PI*2);
ctxfs.closePath();
ctxfs.fill();
ctxfs.restore();
//第四个
ctxfs.save();
ctxfs.translate(500,1100);
ctxfs.fillStyle = "red";
ctxfs.beginPath();
ctxfs.arc(300,0,70,0,Math.PI*2,false);
ctxfs.closePath();
ctxfs.fill();
var small_x = Math.cos(init_angle)*80;
var small_y = Math.sin(init_angle)*80;
ctxfs.beginPath();
ctxfs.translate(small_x,0);
ctxfs.arc(170,20,10,0,Math.PI*2);
ctxfs.closePath();
ctxfs.fill();
ctxfs.restore(); init_angle = init_angle + unit_angle; window.requestAnimationFrame(draw);
}
//自执行函数
(function(){
draw();
})();
</script>
</html>
使用canvas实现360水球波动的更多相关文章
- 利用Canvas实现360度浏览
前言:最近几个月来到新公司,主要从事移动端方面的开发,有时候也挺忙挺累的,于是就好一段时间没写博客了.其实自己在这几个月里,自己对canvas以及createjs和egret都有了一定程度上的认识与掌 ...
- HTML5 Canvas实现360度全景图
原文:http://blog.csdn.net/jia20003/article/details/17172571 很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买 ...
- canvas点阵函数波动，类似飘带或水波
canvas动画利用函数波动特点制作水波动画 <canvas id="myCanvas" width="500" height="400&quo ...
- 【高级功能】使用canvas元素（第一部分）
1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...
- 【温故而知新-Javascript】使用canvas元素（第一部分）
1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...
- Android Canvas绘图详解（图文）
编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! Andr ...
- Android之canvas详解
首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...
- 【转】Android Canvas绘图详解（图文）
转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...
- WebRTC–getUserMedia & Canvas
下面是一个使用getUserMedia接口和Canvas的drawImage方法实现的截图功能(截取视频中的一帧). 基本思路是这样子的: getUserMedia获取一个MediaStream, s ...
随机推荐
- nginx rewrite规则说明
格式:rewrite regex replacement [flag] * rewrite配置可以在server.location以及if配置段内生效 * regex是用于匹配URI的正则表达式,其不 ...
- 【POJ3278】Catch That Cow
本题传送门 本题知识点:宽度优先搜索 题意很简单,我们把FJ与奶牛看作是在一条数轴上的点,奶牛固定在K点,FJ的移动有三种,分别是向前一格,向后一格以及跳到当前格的两倍去.问FJ花费最少的时间到达奶牛 ...
- java的static和this
1>static:静态修饰符 static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被sta ...
- 《Maven实战》整理
一.maven介绍 Maven是优秀的构建工具,能够帮我们自动化构建过程,从清理.编译.测试到生成报告,再到打包和部署. Maven能帮助我们标准化构建过程.在Maven之前,十个项目可能有十种构建方 ...
- Tensorflows安装（cpu版最简安装方法）
一.说明 首先声明,本人系统是Windows10 64位,Win7未试. 本文旨在帮助园友以更简单的方式安装Tensorflow,下面介绍的是如何安装Python的Tensorflow cpu版本. ...
- web页面引入字体
一.常见web字体 TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理, ...
- Myeclipse安装Maven插件
Myeclipse安装Maven插件 一.下载Maven 官网下载maven插件 http://maven.apache.org/download.cgi 下载apache-maven-3.6.3- ...
- 面试突击（七）——JVM如何加载Java字节码信息的？
声明:本文图片均来自网络,我只是进行了选择,利用一图胜千言的力量来帮助自己快速的回忆相关的知识点 1:先看一下Java类文件的转换过程,如下所示,Java字节码文件是通过类加载子系统来放入JVM的内存 ...
- Go 切片：用法和本质
2011/01/05 引言 Go的切片类型为处理同类型数据序列提供一个方便而高效的方式. 切片有些类似于其他语言中的数组,但是有一些不同寻常的特性. 本文将深入切片的本质,并讲解它的用法. 数组 Go ...
- spring data jpa使用@Transactional注解开启事务后失败不回滚
如题,在数据库批量操作方法上使用@Transactional注解,其中一条数据抛出异常了,却死活不回滚. 批量操作方法是公有的,spring也是默认支持事务的,排除代码层面问题,那么就看看数据库是否支 ...