html5 实现波浪效果图,html5Canvas动画实现球内波浪效果

作者：管理员

发布时间：2021/7/28 19:28:27

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=5176

　　效果


　　先画个最作一新求抖直微圈简单的圆


　　var ctx = document.getElementById('myCanvas').getContext('2d');


　　ctx.lineWidth = 1;


　　ctx.strokeStyle = "orange";


　　ctx.arc(100,100,90,0,2*Math.PI,false);


　　ctx.stroke();


　　在圆内上下滚遇新是直朋能到分览动的线


　　var ctx = document.getElementById('myCanvas').getContext('2d');


　　var y = 100;


　　var flag = 0;


　　function init(){


　　//清空canvas


　　ctx.clearRect(0,0,200,200);


　　//计算在左半圆上随着y值上下移动，对应的x值


　　// var y = 30;


　　var expression = 8100 - Math.pow((100-y),2);


　　var x = 100 - Math.sqrt(expression) ;


　　ctx.beginPath();


　　ctx.lineWidth = 1;


　　ctx.strokeStyle = "orange";


　　ctx.arc(100,100,90,0,2*Math.PI,false);


　　ctx.stroke();


　　ctx.lineWidth = 1;


　　ctx.strokeStyle = "green";


　　ctx.beginPath();


　　ctx.moveTo(x,y);


　　ctx.lineTo(200-x, y);


　　ctx.stroke();


　　if (flag == 0) {


　　y += 1;


　　if(y == 130){


　　flag = 1;


　　}


　　}else{


　　y -= 1;


　　if (y == 70) {


　　flag = 0;


　　}


　　}


　　window.requestAnimationFrame(init);


　　}


　　模拟水在整中比需抖接朋功要朋插个球内起伏


　　var ctx = document.getElementById('myCanvas').getContext('2d');


　　var y = 100;


　　var flag = 0;


　　function init(){


　　//清空canvas


　　ctx.clearRect(0,0,200,200);


　　//计算在左半圆上随着y值上下移动，对应的x值


　　var expression = 8100 - Math.pow((100-y),2);


　　var x = 100 - Math.sqrt(expression) ;


　　ctx.lineWidth = 1;


　　ctx.strokeStyle = "green";


　　ctx.beginPath();


　　ctx.moveTo(x,y);


　　ctx.lineTo(200-x, y);


　　ctx.stroke();


　　//计算圆起始点(与X轴平行的直径的右侧端点)与圆左侧给定Y坐标的点


　　var distance = Math.sqrt(Math.pow((190-x),2)+Math.pow((100-y),2));


　　//sina=d/2r a为夹角的一半 2a为两点的圆心角 Math.asin最终结果为弧度 如asin(1)=1/2*PI


　　var angle = Math.asin(distance/180)*2;


　　ctx.beginPath();


　　if(y<100){


　　angle = 2*Math.PI - angle;


　　}


　　ctx.arc(100,100,90,Math.PI-angle,angle,false);


　　ctx.stroke();


　　if (flag == 0) {


　　y += 1;


　　if(y == 150){


　　flag = 1;


　　}


　　}else{


　　y -= 1;


　　if (y == 50) {


　　flag = 0;


　　}


　　}


　　window.requestAnimationFrame(init);


　　}


　　模拟球两边的起伏不同比抖朋要插支一圈不者地步


　　var ctx = document.getElementById('myCanvas').getContext('2d');


　　var step = 0;


　　function init(){


　　//清空canvas


　　ctx.clearRect(0,0,200,200);


　　step++;


　　//转化为弧度


　　var stepAngle = step*Math.PI/180;


　　var deltaHeight = Math.sin(stepAngle)*30;


　　var deltaHeightRight = Math.cos(stepAngle)*30;


　　var y = 100 + deltaHeight;


　　//计算在左半圆上随着y值上下移动，对应的x值


　　var expression = 8100 - Math.pow((100-y),2);


　　var x = 100 - Math.sqrt(expression) ;


　　var rightY = 100 + deltaHeightRight;


　　var expressionRight = 8100 - Math.pow((100-rightY),2);


　　//取右侧的X坐标(同一个y值会有两个x坐标)


　　var rightX = 200 - (100 - Math.sqrt(expressionRight));


　　// alert("rightX:"+rightX+" rightY:"+rightY+" x:"+x+" y:"+y);


　　ctx.lineWidth = 1;


　　ctx.strokeStyle = "green";


　　ctx.fillStyle = "green";


　　ctx.beginPath();


　　ctx.moveTo(x,y);


　　ctx.lineTo(rightX, rightY);


　　ctx.stroke();


　　//计算圆起始点(与X轴平行的直径的右侧端点)与圆左侧给定Y坐标的点


　　var distance = Math.sqrt(Math.pow((190-x),2)+Math.pow((100-y),2));


　　//sina=d/2r a为夹角的一半 2a为两点的圆心角 Math.asin最终结果为弧度 如asin(1)=1/2*PI


　　var angle = Math.asin(distance/180)*2;


　　var distanceRight = Math.sqrt(Math.pow((190-rightX),2)+Math.pow((100-rightY),2));


　　var angleRight = Math.asin(distanceRight/180)*2;


　　ctx.beginPath();


　　//如果在左侧上半圆则用2PI-弧度


　　if(y<100){


　　angle = 2*Math.PI - angle;


　　}


　　if(rightY < 100){


　　angleRight = -angleRight;


　　}


　　ctx.arc(100,100,90,angleRight,angle,false);


　　ctx.stroke();


　　// ctx.fill();


　　window.requestAnimationFrame(init);


　　}


　　把起伏的直朋不功事做时次功好来多这开制的请一例农在线改成曲线(见开头的效果图是能览调不页新代些事几求事都时学下是事)


　　var ctx = document.getElementById('myCanvas').getContext('2d');


　　var step = 0;


　　function init(){


　　//清空canvas


　　ctx.clearRect(0,0,200,200);


　　step+=3;


　　//转化为弧度


　　var stepAngle = step*Math.PI/180;


　　var deltaHeight = Math.sin(stepAngle)*20;


　　var deltaHeightRight = Math.cos(stepAngle)*20;


　　var y = 100 + deltaHeight;


　　//计算在左半圆上随着y值上下移动，对应的x值


　　var expression = 8100 - Math.pow((100-y),2);


　　var x = 100 - Math.sqrt(expression) ;


　　var rightY = 100 + deltaHeightRight;


　　var expressionRight = 8100 - Math.pow((100-rightY),2);


　　//取右侧的X坐标(同一个y值会有两个x坐标)


　　var rightX = 200 - (100 - Math.sqrt(expressionRight));


　　// alert("rightX:"+rightX+" rightY:"+rightY+" x:"+x+" y:"+y);


　　ctx.lineWidth = 5;


　　ctx.strokeStyle = "green";


　　ctx.beginPath();


　　ctx.arc(100,100,90,0,Math.PI*2,false);


　　ctx.stroke();


　　// ctx.fillStyle = "green";


　　ctx.fillStyle = "rgba(0,222,255, 0.2)";


　　ctx.beginPath();


　　ctx.moveTo(x,y);


　　// ctx.lineTo(rightX, rightY);


　　ctx.bezierCurveTo(100, y-30, 100, rightY-30, rightX,rightY);


　　// ctx.stroke();


　　//计算圆起始点(与X轴平行的直径的右侧端点)与圆左侧给定Y坐标的点


　　var distance = Math.sqrt(Math.pow((190-x),2)+Math.pow((100-y),2));


　　//sina=d/2r a为夹角的一半 2a为两点的圆心角 Math.asin最终结果为弧度 如asin(1)=1/2*PI


　　var angle = Math.asin(distance/180)*2;


　　var distanceRight = Math.sqrt(Math.pow((190-rightX),2)+Math.pow((100-rightY),2));


　　var angleRight = Math.asin(distanceRight/180)*2;


　　// ctx.beginPath();


　　//如果在左侧上半圆则用2PI-弧度


　　if(y<100){


　　angle = 2*Math.PI - angle;


　　}


　　if(rightY < 100){


　　angleRight = -angleRight;


　　}


　　ctx.arc(100,100,90,angleRight,angle,false);


　　// ctx.stroke();


　　ctx.fill();


　　window.requestAnimationFrame(init);


　　}






关键字：jquery