您现在的位置是:网站首页>列表内容
html5 canvas 实现光线沿不规则路径运动html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
2023-10-12 04:20:43
203人已围观
简介 这篇文章主要介绍了html5 canvas 实现光线沿不规则路径运动,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
svg让动画沿着不规则路径运动
查阅svg文档后发现,svg动画运动有两种实现方式,且都非常简单,但对于100%实现设计师给出的效果有很大的距离
使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走
offset-path/offset-roate 路径偏移
角度偏移
此种方式的限制是滚动元素无法随路径进行没有规律的变化
使用stroke-dasharray和stroke-dashoffset让路径边线动起来
stroke-dasharray:设置shap和text 边框虚线的实线长度与实线之间的间隔(虚线长度)
stroke-dashoffser:设置边框线条相对于默认位置的偏移(正值:向左,负值:向右)
stroke-dasharray/stroke-dashoffser 设置stroke-dasharray
storke-dasharray设置为80 ,此时实线和实线间隔一样 storke-dasharray设置为80 320,此时实线和是实线间隔的1/4设置stroke-dashoffset让边线相对于初始位置发生偏移
通过设置stroke-dasharray 和 stroke-dashoffset让边线动起来
此种方式通过边框偏移的效果可以设置跟随路径的滚线条,但是无法设置线条的光线效果,即实线的阴影和实线的渐变效果(渐变区域需随着偏移路径的变化而变化)
canvas实现线条延不规则路径运动
线条实现
对于不规则路径,如果直接用画线条的方式实现光线,需要计算每一个开始点和结束点的位置,中间还可能存在转折点,计算起来非常麻烦,不可取
故这边采取canvas组合图形的模式,取线条和一个图形重叠部分(类似于灯罩)来实现光线效果
组合前
组合后
canvas实现不规则路径光效
让线条动起来
当我们实现好线条剩下就需要让线条动起来,由于线条是通过灯罩的方式来实现的,让线条运动只需要让灯罩动起来就好
canvas实现不规则路径光效
这种实现方式也有一定的条件限制,那就是路径可大体抽象成为一个有一定规律的图型或者线条,比如上面demo中路径可抽象成为一个矩形的两边,或者是2条连接的直线
我们必须从没有具体规则的路径中抽象出一个大体的规则,不同路径规则不同
上面的例子就是将不规则路径抽象成了一个直角的规则路径
可优化点
这边找到了2个可优化的点
1.时间方向上: 为了让动画消耗较小,代码中的定时器已经用的是requestAnimationFrame, 但是由于光线的特殊性(自带模糊效果),为了性能更加,尝试了2次requestAnimationFrame调用一次绘图的方式,效果较前者未有明显区别
2.绘图方向上: 从上图可发现,灯罩每次只圈出路径的一部分,故绘图中不需要每次都绘制全部路径,只需要找出灯罩前后的路径点,将这一段路径绘制出来就好
坑点
在完成这个动动画效果之后遇到一个至今原因不明的bug,随着屏幕放置时间的变长,动画越来越慢,打开任务管理器,未见内存泄漏或者cpu使用率过高。打开performance,发现页面调帧严重,屏幕帧数越来越低,单个Frame CPU time越来越长,范围来看,script和render和paint耗时未发生线性变化,只有system时间越来越来长,越来越长,期望能被大佬告知原因
一开始
到后来
解决的办法较为...,光线每循环一个周期,我销毁了之前的canvas并新建了canvas,上层规避了system time不知道为什么越来越长的问题
chrome版本:80.0.3987.163(正式版本) (64 位)
到此这篇关于html5 canvas 实现光线沿不规则路径运动的文章就介绍到这了,更多相关canvas 光线不规则运动内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
点击排行
![](http://img.jbzj.com/file_images/article/201401/2014012615595563.jpg)
- 天天酷跑葫芦侠修改器叉叉助手1月26日辅助教程攻略_刷金币刷分心得_手机游戏_游戏攻略_
- 天天酷跑最新版本攻略_1.0.8.0版本卡坐骑卡人物教程_手机游戏_游戏攻略_
- 天天酷跑1.0.8.0版本新坐骑梦幻神马满级属性技能全方位解析_手机游戏_游戏攻略_
- 天天酷跑1.0.8.0版本新角色闪电骑士满级属性技能全方位解析_手机游戏_游戏攻略_
- 植物大战僵尸2功夫世界体力获得方法说明_功夫世界体力怎么获得_手机游戏_游戏攻略_
- 天天飞车飞行模式玩法攻略_天天飞车飞行模式怎么玩_手机游戏_游戏攻略_
- 永恒战士3 武器选择技巧_手机游戏_游戏攻略_
- 神雕侠侣 帮派修炼功能图文攻略_手机游戏_游戏攻略_
- 悟空去哪儿 地府神通详细介绍_手机游戏_游戏攻略_
本栏推荐
![](http://img.jbzj.com/file_images/article/201401/2014012615595563.jpg)
-
天天酷跑葫芦侠修改器叉叉助手1月26日辅助教程攻略_刷金币刷分心得_手机游戏_游戏攻略_
-
天天酷跑最新版本攻略_1.0.8.0版本卡坐骑卡人物教程_手机游戏_游戏攻略_
-
天天酷跑1.0.8.0版本新坐骑梦幻神马满级属性技能全方位解析_手机游戏_游戏攻略_
-
天天酷跑1.0.8.0版本新角色闪电骑士满级属性技能全方位解析_手机游戏_游戏攻略_
-
植物大战僵尸2功夫世界体力获得方法说明_功夫世界体力怎么获得_手机游戏_游戏攻略_
-
天天飞车飞行模式玩法攻略_天天飞车飞行模式怎么玩_手机游戏_游戏攻略_
-
永恒战士3 武器选择技巧_手机游戏_游戏攻略_
-
神雕侠侣 帮派修炼功能图文攻略_手机游戏_游戏攻略_
-
悟空去哪儿 地府神通详细介绍_手机游戏_游戏攻略_