经验总结

  1. 首页 > 生活 > >

前端图形:SVG与Canvas( 五 )

生活百科

requestAnimationFrame (render)是HTML5提供的动画API，他向浏览器申请执行一个动画帧渲染函数，浏览器在下次重绘（刷新）之前调用这个render回调函数 。requestAnimationFrame还做了很多优化以提升性能和流畅度 。
  • 稳定60帧：浏览器的刷新周期大多和屏幕刷新率匹配，为每秒60次，非常稳定高效 。不像setInterval、setTimeout还要在任务队列里排队等待，就可能发生丢帧和卡顿现象 。
  • 合并优化：浏览器会优化动画的执行，把每一帧的所有DOM操作集中起来，在一个渲染周期内执行 。
  • 隐藏优化：当前窗口或者标签页不可见时停止运行requestAnimationFrame 。
<canvas id="canvas" width="400" height="400"></canvas> <script> ctx = document.getElementById('canvas').getContext('2d'); //动画旋转 let eangle = 0; function drawEllipse() {ctx.clearRect(255, 150, 140, 140);ctx.beginPath();ctx.fillStyle = 'rgba(0,250,0,0.3)';eangle = eangle > 360 ? 0 : eangle + 1;ctx.ellipse(320, 230, 60, 30, eangle * Math.PI / 180, 0, 2 * Math.PI);ctx.stroke();ctx.fill();ctx.beginPath();ctx.ellipse(320, 230, 30, 60, eangle * Math.PI / 180, 0, 2 * Math.PI);ctx.fillStyle = 'rgba(0,0,250,0.3)';ctx.stroke();ctx.fill(); } setInterval(drawEllipse, 20); //水平移动 let lx = 40; let ltr = true; function drawRect() {if (lx > 300) ltr = false;if (lx < 40) ltr = true;// ctx.clearRect(lx, 220, 40, 40);ctx.fillStyle = 'rgb(255,255,255,0.4)';ctx.fillRect(20, 290, 340, 60);lx = ltr ? lx + 2 : lx - 2;ctx.fillStyle = 'rgb(110,22,250)';ctx.fillRect(lx, 300, 40, 40);ctx.strokeRect(lx, 300, 40, 40);requestAnimationFrame(drawRect);//永远不停的提交渲染申请，递归自己 } requestAnimationFrame(drawRect); </script>
前端图形:SVG与Canvas

文章插图
用canvas实现的一个彩球大战：codepen
03、WebGLWebGL 作为一种WEB 3D绘图技术，依托于<canvas>元素 。WebGL是运行在GPU上的，可面向底层显卡编程，可调用底层的接口，实现硬件加速，在2D图形绘制上性能会优于Canvas2D 。传说原生的WebGL比较难学，可考虑使用使用第三方的WebGL库，如Three.js、Cesium.js（3D地图）、Babylon.js
MDN：WebGL 教程
?版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！

经验总结扩展阅读


上一篇：我想念那个不下雪的冬天我想念你躲在我围巾里面是什么歌

下一篇：2022年12月2日能结婚吗