使用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 ...
随机推荐
- LSF 作业系统常用命令
LSF(Load Sharing Facility)是一个被广泛使用的作业管理系统,具有高吞吐.配置灵活的优点.通过 LSF 集中监控和调度,可以充分利用计算机的CPU.内存.磁盘等资源. bqueu ...
- Java对姓名, 手机号, 身份证号, 地址进行脱敏
替换几位就用几个*号 一.姓名 1, 脱敏规则: 只显示第一个汉字,比如李某某置换为李**, 李某置换为李* private static String desensitizedName(String ...
- 七年老运维实战中的 Shell 开发经验总结【转】
无论是系统运维,还是应用运维,均可分为“纯手工”—> “脚本化”—> “自动化”—>“智能化”几个阶段,其中自动化阶段,主要是将一些重复性人工操作和运维经验封装为程序或脚本,一方面避 ...
- android gradle使用阿里源
使用阿里源 新建一个init.gradle 文件到$USER_HOME/.gradle/目录下,这们就省的翻墙了. init.gradle 文件内容如下: allprojects { reposito ...
- Node.js 动态网页爬取 PhantomJS 使用入门(转)
Node.js 动态网页爬取 PhantomJS 使用入门 原创NeverSettle101 发布于2017-03-24 09:34:45 阅读数 8309 收藏 展开 版权声明:本文为 winte ...
- some try on func swap about & and *
import "fmt" func swap(x,y *int ) { //x ,y = y,x //fault /* t := *x *x = *y *y = t */ //tr ...
- SQL调用另一台服务器的表及存储过程（SQL函数openrowset()的使用以及相关问题处理）
--查询表select * from openrowset('SQLOLEDB', 'IP'; 'sa'; '密码',数据库名称.dbo.表名称) --查询存储--示例1select * from o ...
- spring cloud java: 无法访问redis.clients.jedis.JedisPoolConfig 找不到redis.clients.jedis.JedisPoolConfig的类文件
spring cloud <spring-cloud.version>Greenwich.SR3</spring-cloud.version> 注入Redis 时候: @Bea ...
- 拼接Sql语句小心得
在往数据库插入数据时,需要根据数据和数据库中的列信息进行拼接,在本篇文章中,输出小心得.使用语言为 python. 拼接原始列信息 比如待插入数据库列信息为 deptNo,dName, Locate, ...
- 如何画出高级感的曼哈顿图，Manhattan++工具介绍
欢迎来到"bio生物信息"的世界 BMC Bioinformatics前几天发布了一个画曼哈顿图的工具Manhattan++, 这个名字很好理解,Manhattan的升级版. 这个 ...