浙江龙网

  1. 首页 > 生活百科 > >

前端图形:SVG与Canvas( 四 )

生活百科


前端图形:SVG与Canvas

文章插图
  • 二次贝塞尔曲线调试器
  • 三次贝塞尔曲线调试器
弧度 = ( Math.PI / 180 ) * 角度 ， 360度的弧度= Math.PI*2
2.2、动画Canvas的动画就是不停的重绘 ， 其实任何动画都是这样 ， 前端实现动画有以下几种姿势：
  1. setInterval(function, delay)：定时重绘，适合不需要交互的场景 。
  2. setTimeout(function, delay)：定时重绘，适合通过键盘或者鼠标事件来捕捉用户的交互，再用 setTimeout 执行相应的动作 。
  3. requestAnimationFrame(callback)：动画专用API，这个方法更加平缓并更加有效率，当系统准备好了重绘条件的时候 ， 才调用绘制动画帧 。
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 教程
?版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流 ， 转载请注明出处！

推荐阅读


上一篇：通过 Github Action 实现定时推送天气预报

下一篇：.NET Core C#系列之XiaoFeng.Threading.JobScheduler作业调度