JavaScript canvas复刻苹果发布会环形进度条

目录
  • 前言
  • 基础 Dom 结构
  • 基本变量
  • 画圆
  • 画弧线
  • 让画面动起来
  • 总结

前言

canvas 真是一个好东西,它给前端插上了想象的翅膀,伴随着 h5 而来,将 web 代入了新的领域,基于canvas 技术实现的各种酷炫效果和2d、3d 游戏,也让浏览器能承载更加强大的功能。尤其是它性能还很好,搞游戏再合适不过了,我就喜欢用 canvas 写一些小游戏玩。

在线地址

最近无意中看到前段时间写的这个小效果,觉得挺有意思的,就分享出来;这是苹果ios 12 发布会上库克 ppt 里展示的内容,一个带荧光效果的环形进度条;一个接外包项目的朋友,遇到客户指定要这个效果,实在搞不定了找到我,于是才有了下面的复刻实现。

基础 Dom 结构

第一步先把标签元素写上,后面将据此生成画布上下文对象,canvas 标签内的内容将在浏览器不支持的情况下显示,否则会自动忽略。

<div class="container">
  <canvas id="canvas" width="600" height="600">
    <p>抱歉,您的浏览器不支持canvas</p>
  </canvas>
</div>

基本变量

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d") // 上下文对象
let circleX = canvas.width / 2 // 中心x坐标
let circleY = canvas.height / 2 // 中心y坐标
let radius = 100 // 圆环半径
let percent = 90 // 最终百分比
let lineWidth = 1 // 圆形线条的宽度
let fontSize = 42 // 字体大小

画圆

首先画一个圆出来,主要定义画笔颜色、位置、样式、阴影、模糊值等, 这个是作为背景图使用的。

// 画圆
function circle(cx, cy, r) {
  ctx.beginPath()
  // ctx.moveTo(cx, cy-r-10)
  ctx.lineWidth = lineWidth
  ctx.strokeStyle = "#666"
  ctx.lineCap = "round"
  ctx.shadowColor = "#000" //设置阴影颜色
  ctx.shadowBlur = 0 //设置模糊值
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.arc(cx, cy, r + 10, 0, (Math.PI / 180) * 360)
  ctx.moveTo(cx + r, cy)
  // ctx.moveTo(cx, cy-r)
  ctx.arc(cx, cy, r, 0, (Math.PI / 180) * 360)
  ctx.stroke()
}

画弧线

背景层之上,就需要弧线来表示主效果了

// 画弧线
function sector(cx, cy, r, startAngle, endAngle, anti) {
  ctx.beginPath()
  ctx.moveTo(cx, cy - r - 5) // 从圆形底部开始画
  ctx.lineWidth = 12
  ctx.strokeStyle = "#ffccff"
  // ctx.fillStyle = '#ffccff'
  // 圆弧两端的样式
  ctx.lineCap = "round"
  ctx.shadowColor = "#ff6699" //设置阴影颜色
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 4 //设置模糊值

  // 圆弧
  ctx.arc(
    cx,
    cy,
    r + 5,
    startAngle * (Math.PI / 180.0) - Math.PI / 2,
    endAngle * (Math.PI / 180.0) - Math.PI / 2,
    anti
  );
  ctx.moveTo(cx, cy - r) // 从圆形底部开始画
  ctx.moveTo(cx, cy - r) // 从圆形底部开始画
  ctx.stroke()
}

让画面动起来

通过定时执行刷新动作,来实现进度条的数据更新和画布重绘,可以使用 while 循环配合 async await setTimeout 异步来实现帧率控制

// 刷新
function loading(n) {
  // 清除canvas内容
  ctx.clearRect(0, 0, circleX * 2, circleY * 2)

  // 中间的字
  ctx.font = fontSize + "px April"
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"
  ctx.fillStyle = "#ffccff"
  ctx.fillText(parseFloat(n).toFixed(0) + "%", circleX, circleY)

  // 圆形
  circle(circleX, circleY, radius)

  // 圆弧
  sector(circleX, circleY, radius, 0, (n / 100) * 360)
  sector2(circleX, circleY, radius, 0, (n / 100) * 360)
  // 遮盖
  cover(circleX, circleY, radius)
}

// 更新进度
function changeProcess(val, times) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      loading(val)
      resolve()
    }, times)
  })
}

// 循环
async function loop(val) {
  while (true) {
    for (let i = 0; i < val; i++) {
      await changeProcess(i + 1, 1000);
    }
    return
  }
}

loop(percent)

总结

通过 canvas 提供的 arc api 结合样式配置,100 行左右的代码实现了苹果发布会上的这个效果,是不是很有意思呐。

到此这篇关于JavaScript canvas复刻苹果发布会环形进度条的文章就介绍到这了,更多相关JavaScript canvas进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript canvas实现环形渐变进度条

    最近有个需求要做环形渐变色进度条,去网上找了半天没找到合适的,大多数渐变色都是径向渐变,所以自己用canvas写了个环形渐变的图: 这个渐变其实就是把圆环分成许多小块分别绘制的,所以小块分的越多,渐变色越均匀,但是当圆环尺寸比较小的时候,边缘特别毛糙,需要适当减少份数,代码里是用unit 这个变量手动控制的,算是一个缺陷吧. 代码在此: <!DOCTYPE html> <html>     <head>         <style>            

  • JavaScript实现可动的canvas环形进度条

    目录 介绍 1.创建canvas元素 2.绘制的准备工作 3.绘制环形底层 4.绘制进度层 5.绘制字体并指定位置 6.进度动画 介绍 今天分享一个环形进度条的写法,当然这只是一个可动的静态进度条,如果你喜欢可以加入后台数据.这种进度条非常简单的写法到处都有,只不过更多的只是写个样子,咱们这个可以动哟. 前提是canvas的属性.方法和一些基础的js API你都知道,当然为了保证一些忘记的小伙伴一下想起来,我会在前面列个表. 属性和方法 描述 getContext() 返回一个用于在画布上绘图的

  • JS实现环形进度条(从0到100%)效果

    最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图 代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

  • js实现增加数字显示的环形进度条效果

    效果如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <link> <meta name="page-view-size" content="640*530"> <meta http-equiv="Content-Type" content="text/

  • 详解JavaScript+Canvas绘制环形进度条

    目录 效果图 思考 实现思路 具体代码实现 效果图 思考 移动端的场景里经常会出现环形进度条的功能,在实现这个功能前,我预想的解决方案大致有: echarts.antv.canvas.svg 前面两种第三方提供的解决方案当然是简单,拿到案例修整一下即可,但是需要下载依赖,而且代码量不小.有没有不需要依赖第三方包,采用原生的写法,独立封装成一个组件,降低耦合,而且性能优越? 当然,那就主要介绍canvas的使用 实现思路 可以展示整个圆.半圆以及任意角度弧形(左右对称)的进度条.整体思路如下: 1

  • 环形加载进度条封装(Vue插件版和原生js版)

    本文实例为大家分享了环形加载进度条封装代码,供大家参考,具体内容如下 1.效果预览 2.用到的知识 主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性. 在看下面文章之前,你需要了解 <!DOCTYPE html> <html> <head> <title>svg demo</title> <style type="text/css"> #line{ transition

  • JavaScript canvas复刻苹果发布会环形进度条

    目录 前言 基础 Dom 结构 基本变量 画圆 画弧线 让画面动起来 总结 前言 canvas 真是一个好东西,它给前端插上了想象的翅膀,伴随着 h5 而来,将 web 代入了新的领域,基于canvas 技术实现的各种酷炫效果和2d.3d 游戏,也让浏览器能承载更加强大的功能.尤其是它性能还很好,搞游戏再合适不过了,我就喜欢用 canvas 写一些小游戏玩. 在线地址 最近无意中看到前段时间写的这个小效果,觉得挺有意思的,就分享出来:这是苹果ios 12 发布会上库克 ppt 里展示的内容,一个

  • canvas绘制环形进度条

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.

  • canvas实现环形进度条效果

    昨下午睡着了,晚上打开手机才发现朋友给我发了一个QQ消息,问我这个怎么实现? 这里就选canvas来简单写一下 先上代码,然后在说一说需要注意的点: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas环形进度条</title> <style> body{ background-color:#000; text-align:

  • Android中制作进度框和环形进度条的简单实例分享

    进度框 import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; import java.util.Random; public class ObliqueProgressbar ext

  • Android实现环形进度条的实例

    Android实现环形进度条的效果图如下: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; // 圆形颜色 private int mCircleColor

  • Android实现环形进度条

    一个通俗易懂的环形进度条,可以定制颜色角度,监听进度. 定义一个attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CircleProgressView"> <!--画笔宽度--> <attr name="progress_width" format=&q

  • 微信小程序自定义组件实现环形进度条

    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 微信小程序自定义组件官方教程 环形进度条的组件已经放在github上 环形进度条效果图 创建步骤 1.在根目录创建名为components的文件夹,用来放需要引用的自定义组件. 2.创建名为canvas-ring的文件夹,用来放环形进度条自定义组件. 3.鼠标指着canvas-ring的文件夹 鼠标右键 "新建 Component" 取名canvas-ring. 结构图: 环形进度条组件的代码 canva

随机推荐