摘要：一个没什么特别的日子，你接到了一个没什么特别的设计图，准备写个没什么特别的活动页，然后，看到了一个效果唔，射鸡狮啊，你这个圆是不是没画好啊，缺了个角。唔，那个是不是可以画画作为一个熟练操作和的前端工程师，那就去看看有没有提供什么让我们的吧。
一个没什么特别的日子，你接到了一个没什么特别的设计图，准备写个没什么特别的活动页，然后，看到了一个效果：
“唔，射鸡狮啊，你这个圆是不是没画好啊，缺了个角。”
“这是设计，你懂不懂？你照着设计稿做就完事了，别哔哔。”
“擦，缺个角的圆让我怎么做！？你听我说，CSS只能画圆，而且你这个环的两端还是圆的……”
“有没有搞错，这点小图都做不出来，要不换个前端来跟我对接吧。”
作为一个有尊严的前端工程师，那肯定要证明自己！想想有没有什么办法吧。唔，那个Canvas是不是可以画画？
作为一个熟练操作ctrl + c和ctrl + v的前端工程师，那就去看看Canvas有没有提供什么API让我们ctrl + c的吧。
官方文档那些文绉绉的东西就不带大家看了，这里分享给大家一个不错的Canvas教程。由于我们的目的是证明自己，赶紧翻了翻这个教程的目录，立马发现了一个标题《绘制标准圆弧》，这是不是我们想要的东西呢？
抛开那些什么复杂的圆弧什么曲线，会发现一个API:context.arc(x,y,radius,startAngle,endAngle,anticlockwise)，其中startAngle以及endAngle是起始与结束的位置，它们的单位是弧度，那我们只要利用好这两位置，就能画出一个不闭合的圆了！直观点的图：
codepen看看
GET！这就是我们想要的样子！这只是成功的第一步，看看跟效果图的差别，我们还差一个外圈框住这个绿色的圈。
codepen看看
这简直就是高保真还原设计图嘛！剩下的事情就简单啦，只需要让这个绿色的圈能动起来就完事了！
这个动画思路还是比较明确的，无非就是一帧帧地让内圈从一个位置转到另一个位置直至到达结束的位置：
codepen看看
到此为止，你就证明了自己，找回前端工程师的尊严！走，打射鸡狮去！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113518.html
摘要：一个没什么特别的日子，你接到了一个没什么特别的设计图，准备写个没什么特别的活动页，然后，看到了一个效果唔，射鸡狮啊，你这个圆是不是没画好啊，缺了个角。唔，那个是不是可以画画作为一个熟练操作和的前端工程师，那就去看看有没有提供什么让我们的吧。 一个没什么特别的日子，你接到了一个没什么特别的设计图，准备写个没什么特别的活动页，然后，看到了一个效果：showImg(https://segme...
摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。 在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...
摘要：在开发微信小程序的时候，遇到圆形进度条的需求。但使用和实现进度条就很容易的避免了这方面的问题。如下图最下面的圆形是进度条的背景，在上面有和两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。 在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序...
摘要：如果不想看步骤的可以直接看最后面有完整的代码最近在做一个圆形的进度条，在网上看了一些例子有些地方不太理解，后来自己写了个一个分享一下先上一个最终的效果首先画一整个圆定义进度为定义总进度为定义圆的半径为至此大圆画完上面的代码需要注意的是方法的 如果不想看步骤的可以直接看最后面有完整的代码 最近在做一个圆形的进度条，在网上看了一些例子有些地方不太理解，后来自己写了个一个分享一下 先上一个最...
摘要：简介实际开发中，文件的图片的加载等情形下经常需要展示进度情况。最简单的直接显示百分之多少即可，然后一般情况下就是条形进度条，设置长度表示已完成进度。这里介绍一下稍微复杂的圆形进度条如何实现。 简介 实际开发中，文件的download、upload、图片的加载等情形下经常需要展示进度情况。 最简单的直接显示百分之多少即可，然后一般情况下就是条形进度条，设置长度表示已完成进度。这里介绍一下...
阅读 3500·2023-04-25 16:32
阅读 1896·2021-09-28 09:36
阅读 1853·2021-09-06 15:02
阅读 471·2021-09-02 15:21
阅读 735·2019-08-30 15:56
阅读 3412·2019-08-30 15:45
阅读 1562·2019-08-30 13:09
阅读 284·2019-08-29 16:05
