为什么JS绘制的动画中会有重影呢，请求

JavaScript013

为什么JS绘制的动画中会有重影呢，请求,第1张

animation-fill-mode : forwards //设置对象状态为动画结束时的状态

animation-fill-mode

语法：

animation-fill-mode：none | forwards | backwards | both [ ,

none | forwards | backwards | both ]*

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

none：

默认值。不设置对象动画之外的状态

forwards：

设置对象状态为动画结束时的状态

backwards：

设置对象状态为动画开始时的状态

both：

设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationFillMode。

这个是最简单的方法，

也可以侦听动画结束事件，给元素加个class类名，这个class定义的就是元素结束时的状态的css样式

elevideo.addEventListener('loadedmetadata', function () { 

    //加载数据//视频的总长度console.log(elevideo.duration) 

 })

elevideo.addEventListener('play', function () { 

    //播放开始执行的函数console.log("开始播放") 

 })

elevideo.addEventListener('playing', function () { 

    //播放中 console.log("播放中")

})

elevideo.addEventListener('waiting', function () {

     //加载console.log("加载中") 

 })

elevideo.addEventListener('pause', function () {

     //暂停开始执行的函数console.log("暂停播放") 

 })

elevideo.addEventListener('ended', function(){

     //结束console.log("播放结束") 

 }, false)

在JS中获取video标签，并监听它的loadeddata事件。

loadeddata是指当媒体当前播放位置的帧完成加载时触发该事件，通常是第一帧。

在监听 loadeddata 中指定事件触发时执行的函数，我们的实现截取第一帧就在这里面编写。

首先定义创建一个 canvas 标签；其次指定 canvas 标签的宽高；最后调用canvas元素中的getContext方法。