本文转自：https://www.imooc.com/article/289809 最近项目中需要处理与图片相关的布局，不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气。因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果，你就需要找到适合的方式。 而且图片往往是不可或缺元素。毕竟一图胜千言，有时候图片能给带来非常好的效果。 比如我们每天都会使用的表情包，它往往能够表达出我们无法用文字描述的信息，还比如我们经常在公众号里看到的漫画虽然短短几个字，但是却能够让我们看的不亦乐乎。 当然如果我们做图片网站的，那图片的处理就是绕不开的话题了。因对图片的处理经验不多，所以就边学边用。今天就把最近学习与图片相关的知识整理出来。 比如单个图片如何更好的展示，瀑布流布局都有哪些你不知道的实现方式。 接下来我们就直接进入正题，我们先从单张图片的展示说起。 设置宽或高 100 因为图片其本身的独特性： 不设置宽高的情况下会按原有的尺寸显示在网页中。即有多大，显示多大。 在非等比缩放的情况下会被拉伸变形。 设置宽度或者高度时，会保持原宽高比进行缩放。 显然当我们采用 1、2 种方式的时候破坏性很强，无法应用到实际的项目中去。 所以往往我们会在项目中使用第 3 种方式，即设置高度或者宽度。它会保持原有比例进行缩放。 但是问题又来了，图片要么超出容器，要么就会留有空白，除非容器的宽高比恰好等于图片的宽高比时，才会完全贴合。 对于超出容器的图片我们可以使用 overflow: hidden 把超出部分隐藏。图片得到了好的展示效果。但相应的我们也损失了图片的一部分可视区域。 所以这个时候就需要你根据需求进行取舍了，到底是选择隐藏图片的一部分，还是留有空白。有的小伙伴会说，我们产品说了，图片变形没问题，你就给我充满容器就行了。好吧… 即使如此，你也要把这篇文章好好读一读，因为需求是千变万化的，保不齐哪一天就需要了。 又有小伙伴说，这 2 种都不符合我们的产品需求怎么办，还有其他的方式吗？答案是必须的，一起来看。 object-fit CSS3 的 object-fit 属性是用来指定「可替换元素」的内容是如何适应到容器中的。它的值有 5 种。分别为：fill | contain | cover | none […]

目录 效果图 思考 实现思路 具体代码实现 效果图 思考 移动端的场景里经常会出现环形进度条的功能，在实现这个功能前，我预想的解决方案大致有： echarts、antv、canvas、svg 前面两种第三方提供的解决方案当然是简单，拿到案例修整一下即可，但是需要下载依赖，而且代码量不小。有没有不需要依赖第三方包，采用原生的写法，独立封装成一个组件，降低耦合，而且性能优越？ 当然，那就主要介绍canvas的使用 实现思路 可以展示整个圆、半圆以及任意角度弧形（左右对称）的进度条。整体思路如下： 1.先确定展示的形状，是整个圆、半圆还是一般的弧形 2.把确定好形状的圆弧均分100等份，计算出每一份所占的弧度 3.灰色圆弧占100份，红色圆弧最终占的份数由参数确定 4.设置setInterval定时器，重复执行画图操作 清空画布 先画灰色的圆弧，占100份 再画红色的圆弧：红色圆弧的份数从0开始，每次加1 画红色圆弧末端的红色圆：难点在于根据角度确定红色圆的圆心，这里面涉及到三角函数，在草稿纸上画个图就大致明白了 当红色圆弧的份数达到指定值（传的参数）的时候，清除定时器 具体代码实现 关于动画部分，可以使用requestAnimationFrame做优化，函数改写如下：

使用setInterval可以定时无限次的执行某个事件，但如果想要执行一定的次数应该怎么操作？ 代码如下：