怎么在html5中使用canvas实现光线沿不规则路径运动
这篇文章将为大家详细讲解有关怎么在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实现不规则路径光效
关于怎么在html5中使用canvas 实现光线沿不规则路径运动就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:怎么在html5中使用canvas实现光线沿不规则路径运动
网址分享:http://scyanting.com/article/goejhi.html