使用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>

View Code

转载于:https://www.cnblogs.com/weibanggang/p/11364010.html

使用canvas实现360水球波动相关推荐

html360全景图原理,HTML5 Canvas实现360度全景图
HTML5 Canvas实现360度全景图发布时间:2020-07-22 12:15:07 来源:51CTO 阅读:557 作者:gloomyfish 很多购物网站现在都支持360实物全景图像,可以 ...
HTML5 Canvas实现360度全景图
很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样对购买者来说是一个很好的消费体验,网上有很多这样的插件都是基于JQuery实现的有收费的也有免费的,其实很好用的一个叫3 ...
html5全景代码,HTML5 Canvas实现360度全景图的示例代码
很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样对购买者来说是一个很好的消费体验,网上有很多这样的插件都是基于jQuery实现的有收费的也有免费的,其实很好用的一个叫3de ...
s时钟画布 android,Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟
概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的 ...
Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟
概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的 ...
Android自定义控件前导基础知识学习（一）——Canvas
概述: 我们时常会遇到一些需要利用画图来实现的功能.例如一些常见的几何图形--点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,总不能遇到一个几何图形就用图片来代替吧.这样我们的手机肯定会 ...
Android之canvas详解
首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...
canvas动画 - 背景线条 - 应用篇
Canvas纯色背景+线条波动效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta charset="U ...
html canvas blob image 污染源
html canvas 被污染当html中的图片来自于另外一个网站时,canvas被污染,这样,toDataURL和toBlob等函数等都不可以输出了,当canvas被污染的时候怎么做?https: ...

使用canvas实现360水球波动

使用canvas实现360水球波动相关推荐

最新文章

热门文章