JS小球抛物线轨迹运动的两种实现方法详解(2)
第二种:h5中的canvas绘制小球和运动区域
思路:采用canvas绘制小球,由于小球不能通过top和left移动,因此它需要每次调用都要用clearRect清空画布,然后绘制计算后位置的小球。代码如下:
<!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { min-height: 100vh; display: flex; justify-content: center; align-items: center; } #myCanvas { box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9; } </style> </head> <body> <canvas id="myCanvas" width="600px" height="600px"></canvas> <script type="text/javascript"> var x=50,y=50,k=1; var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#e0e0e0"; cxt.beginPath(); cxt.arc(x,y,30,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); t=setInterval("parabola()",100); function parabola(){ cxt.clearRect(0,0,600,600);//清除原始图形 cxt.beginPath(); x=50+0.1*k*4*100;y=50+9.8*0.1*k*0.1*k*1/2*100; cxt.arc(x,y,30,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); k++; if(x>520||y>520){ clearInterval(t); } } </script> </body> </html>
两个方式都能实现,计算的方式都是一样的,只是方式不同。第一个是偏css,采用了border-radius和动态修改DOM,第二个采用canvas绘制图形,绘制过程要好好研究。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。