1直接贴图在界面上贴一个gif动态等待效果图片gif图片获取方式网上找素材，会ps的可以自己制作2CSS3SVGHTML5Canvas手动绘制等待效果这种效果网上有很多类似素材，可以根据需要选择，或使用上述技术绘制下面提供一个CSS3绘制的范例loadingwidth0height0borderright20pxsolid#fffborder。

因为Canvas是基于状态的绘制很重要，后面会解释，所以前面几步都是在确定状态，最后一步才会具体绘制1移动画笔moveTo之前我们获得了画笔context，所以以此为例，给出改方法的使用实例contextmoveTo100，100这句代码的意思是移动画笔至100，100这个点单位是px记住，这里是以。

你的图片如果是全屏背景的话，可以获取浏览器窗口的宽和高，如果不是占满而只是其中的一部分，用上面说的办法获取相应的父元素的宽和高，再设置图片或者html5canvas的宽和高这样你看，不管你是用普通的img元素，还是用html5画布，都可以自适应浏览器窗口的分辨率关于作图大小的问题要看你的需求。

那么我们今天就一起来整理和分享一下前端动态效果的制作方法，并对其中的 Canvas 进行一下简单的讲解2动态效果的分类我们首先先来简单看一下，动态效果的制作有哪些分类3GIF首先第一个就是我们的 gif 图片，这是一种非常简单，但却高效的动态图制作方式GIF图片擅长于 制作细节的小动画 ，位图。