分享更有价值
被信任是一种快乐

html5怎么实现波浪效果图

文章页正文上

这篇文章主要介绍了html5怎么实现波浪效果图的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html5怎么实现波浪效果图文章都会有所收获,下面我们一起来看看吧。
  先画个最作一新求抖直微圈简单的圆
  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

  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

  angle = 2*Math.PI – angle;
  }
  if(rightY

  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

  angle = 2*Math.PI – angle;
  }
  if(rightY

  angleRight = -angleRight;
  }
  ctx.arc(100,100,90,angleRight,angle,false);
  // ctx.stroke();
  ctx.fill();
  window.requestAnimationFrame(init);
  }关于“html5怎么实现波浪效果图”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“html5怎么实现波浪效果图”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: CSS中的inherit关键字怎么用

本文小编为大家详细介绍“CSS中的inherit关键字怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS中的inherit关键字怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。   inherit关键字   由于CSS…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册