:
秒倒计时
摘要:最近学了点,做了个滴滴的进度条效果,由于本人未使用过滴滴,所以不太清楚该具体效果以及该页面是怎样的。这样就有进度条的效果了。进度条圆的厚边框,自行设置方法将绘图状态置为保存值。
最近学了点canvas,做了个滴滴的进度条效果,由于本人未使用过滴滴,所以不太清楚该具体效果以及该页面是怎样的。yy出了以下效果:
先从简单的圆开始吧!
代码:
let c = document.getElementById("myCanvas") // getContext() 方法返回一个用于在画布上绘图的环境。 let ctx = c.getContext("2d") // 起始一条路径,或重置当前路径 ctx.beginPath() // 创建弧/曲线(用于创建圆形或部分圆) ctx.arc(100, 75, 50, 0, 2*Math.PI) // 绘制已定义的路径 ctx.stroke()
这里贴出arc()函数说明:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
有兴趣的同学可以进入链接查看更多属性和方法: http://caibaojian.com/html5-c...
接下来我们绘制圆环以及动画:
let canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d"), cirX = canvas.width/2, cirY = canvas.height/2, rad = Math.PI*2/100, n = 0, r = 45;
绘制图形并生成动画:
function DreamLoading() { // clearRect() 方法清空给定矩形内的指定像素。 context.clearRect(0,0,canvas.width,canvas.height); writeCircle(); writeText(n); writeOrange(n); if(n < 100) { n = n + 0.1 } else { n = 100; } window.requestAnimationFrame(DreamLoading); }
当我们写window.requestAnimationFrame(回调函数)时,浏览器会在下次重绘前执行回调函数。这样就有进度条的效果了。
画圆:
function writeCircle() { // 画个圆 // save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态,然后,通过调用 restore() 来恢复以前的值。 context.save(); context.beginPath(); context.strokeStyle = "#FF8C00"; context.arc(cirX,cirY,r,0,Math.PI*2,false); context.stroke(); context.restore(); }
进度条:圆的厚边框,lineWidth自行设置
function writeOrange(n) { context.save(); context.strokeStyle = "#FF8C00"; context.lineWidth = 3; context.beginPath(); context.arc(cirX,cirY,r,-Math.PI/2,-Math.PI/2+rad*n,false); context.stroke(); // restore() 方法将绘图状态置为保存值。 context.restore(); }
文本,百分比效果:
function writeText(n) { context.save(); context.strokeStyle = "#FF8C00"; context.font = "20px Arail"; context.strokeText(n.toFixed() + "%", cirX-30,cirY+10); context.stroke(); context.restore(); }
百分比进度条效果全部代码:
倒计时效果代码:
let minute = 1 const Time = minute*60 let second = 0 render(minute, second) const interval = setInterval(() => { if (second < 60) { second-- if (second < 0) { second = 59 minute-- } } if(minute == 0 && second == 0) { clearInterval(interval) } render(minute, second) },1000) function render(minute, second) { if (minute < 10) { document.querySelector(".minute").innerText = "0" + minute; } else { document.querySelector(".minute").innerText = minute; } if (second < 10) { document.querySelector(".second").innerText = "0" + second; } else { document.querySelector(".second").innerText = second; } }
完整代码:
Document 派单中取消订单系统选择司机:
秒倒计时
不够精确,在计算的时候有些错误。希望同学们能一起解决。谢谢!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50782.html
摘要:功能三滴滴费用计算古人云细节决定成败,一个良好的微信小程序往往就是一些细节打动人心,居然是模仿,虽做不到百分百,至少还是很希望一模一样。 最近时常感叹道:时间总是那么的快,转瞬即逝。对于像我这种刚入门的小生来讲,技术每天都在更新,框架也层出不穷,有时候还没弄懂这个知识大牛们又推出了更好的技术。当然学习好的技术也是十分重要的。但是在学习之后怎样才能够得到自己想要的呢,一个好的建议便是静...
摘要:仿滴滴出行项目最近,各大社区出现很多小伙伴的项目,趁着这股热潮我也用撸了一个滴滴出行的项目。可是,后来在手机上发现,输入的时候居然调不出软键盘,写项目的时候没考虑到设备问题,简直是大大的失误。也就是说可以在组件内部进行请求,不需要提交。 Vue2.0 仿滴滴出行项目 最近,各大社区出现很多小伙伴的vue项目,趁着这股热潮我也用vue撸了一个滴滴出行的项目。 效果预览 showImg(h...
摘要:今天这篇文章要介绍的是一个酷炫的进度条的设计和实现,在进度的文字内容颜色以及切换的图片等都可以自由设置。那么下面我们就开始从无到有实现一下这个酷炫的进度效果吧。三利用与来实现进度效果。四利用阻尼动画实现进度条回弹效果。 showImg(/img/remote/1460000006465670); 今天这篇文章要介绍的是一个酷炫的进度条的设计和实现,在进度的文字内容、颜色以及切换的图片等...
阅读 3456·2021-10-08 10:04
阅读 826·2019-08-30 15:54
阅读 2136·2019-08-29 16:09
阅读 1322·2019-08-29 15:41
阅读 2241·2019-08-29 11:01
阅读 1697·2019-08-26 13:51
阅读 999·2019-08-26 13:25
阅读 1774·2019-08-26 13:24