canvas实现有递增动画的环形进度条的实现方法

<template lang='pug'> .indexs#Indexs.app-bg transition(name="fade") swiper#swiperBox(:options="swiperOption" ref="mySwiper") swiper-slide.swiper-slide1 .container .up swiper-slide.swiper-slide2(v-if="isShow") .my-shark .up swiper-slide.swiper-slide3 .container .data-cont .data.data01 .data01-charts .row(v-for='item,index in Data' :key="index" :class='aniShow ? "ani":""') .data-txt {{item.grade > 0 ? item.grade : '无数据'}} .progress(:class='item.grade == 0 ? "nodata" : ""' :style="'height: ' + (aniShow ? (item.grade >= 100 ? (100 * 1.5) / 100 : item.grade == 0 ? 0.04 : item.grade * 1.5 / 100) : 0) +'rem'") span.pg-data .week {{item.week}} .data.data02 .data02-charts .canvas-box //- baseCanvas canvas#baseCanvas.my-canvas(ref="baseCanvas" width="174" height="174") //- canvas canvas#myCanvas.my-canvas.clr-canvas(ref="myCanvas" width="174" height="174") .canvas-data #[span.num {{grade}}]分 </template> <script> var vm = null, timer1 = null, /* canvas基础值 */ c = null, //document.getElementById("myCanvas"); ctx = null, //canvas-2d画布 x = 161 / 2 + 1, //圆心坐标 r = (161 - 10) / 2; //半径大小 /* swiper组件 */ import { swiper, swiperSlide } from "vue-awesome-swiper"; import { getData } from "../io/getData"; export default { name: "Indexs", components: { swiper, swiperSlide }, data() { return { grade: 0, //圆环图分数 gradeTarget: 78.54, //实际得分数，可ajax请求数据后修改 isShow: true,//是否展示第二页swiper aniShow: false,//是否开启柱图动画 Data:[{ week: "第一周", grade: 0 }, { week: "第二周", grade: 30 }, { week: "第三周", grade: 99.99 }, { week: "第四周", grade: 76.98 }, { week: "第五周", grade: 100 }], swiperOption: { //swiper参数 notNextTick: true, direction: "vertical", grabCursor: true, setWrapperSize: true, autoHeight: true, slidesPerView: 1, mousewheel: false, mousewheelControl: false, height: window.innerHeight, // 高度设置，占满设备高度 resistanceRatio: 0, observeParents: true, initialSlide: 2 - 1, //设置初始化时，swiper的默认展示页面，从零开始 on: { slideChange() { if ( (this.activeIndex == 2 && vm.isShow) || (this.activeIndex == 1 && !vm.isShow) ) { console.log(this.activeIndex, vm.isShow, "绘制动画"); setTimeout(function() { // 配合展示柱状图动画 vm.aniShow = true; // 定时器不断触发绘制彩色圆环，实现圆环动画效果 timer1 = setInterval(function() { // 中间分数文案更改 var num = vm.grade; num++; if (num >= vm.gradeTarget) { vm.grade = vm.gradeTarget; clearInterval(timer1); } else { vm.grade = num; } vm.clearCanvas(); vm.drawClrCanvas(); }, 1000 / 60); }, 500); } else { // 翻页后，初始化数据页面的状态、清除定时器暂停动画、并把彩色圆环清空 console.log("其他页"); clearInterval(timer1); vm.grade = 0; vm.aniShow = false; vm.clearCanvas(); } } } } }; }, computed: {}, mounted() { // 初始化数据、绘制灰色圆环 vm = this; c = this.$refs.myCanvas; ctx = c.getContext("2d"); this.drawBaseCanvas(); }, methods: { drawBaseCanvas() { // canvas绘制 /* 基础值 */ var c = this.$refs.baseCanvas, //document.getElementById("myCanvas"); // debugger; ctx = c.getContext("2d"), o = x, randius = r; /* 默认灰色圆圈 */ ctx.strokeStyle = "#eee"; ctx.lineWidth = 10; ctx.beginPath(); ctx.arc(o, o, randius, 0, 2 * Math.PI); ctx.stroke(); }, clearCanvas() { // 清除画布 ctx.clearRect(0, 0, 200, 200); }, drawClrCanvas() { var gradient = ctx.createLinearGradient(75, 50, 5, 90); gradient.addColorStop("0", "#C88EFF"); gradient.addColorStop("1.0", "#7E5CFF"); ctx.strokeStyle = gradient; // 用渐变进行填充 ctx.lineWidth = 10; ctx.lineCap = "round"; ctx.shadowColor = "rgba(191,142,255, 0.36)"; ctx.shadowBlur = 8; ctx.shadowOffsetY = 8; ctx.beginPath(); var count = this.grade / (100 / 2) + 1; ctx.arc(x, x, r, Math.PI, Math.PI * count, false); ctx.stroke(); } } }; </script> <style lang='scss'> // 柱图 .row { position: relative; z-index: 1; width: 0.61rem; margin-bottom: -0.28 - 0.08 - 0.38rem; text-align: center; } .data-txt { font-size: 0.2rem; line-height: 0.2rem; margin-bottom: 0.09rem; } .progress { height: 0rem; transition: height 0.5s ease-in-out; } .ani { @for $i from 1 to 6 { &:nth-of-type(#{$i}) { .progress { transition-delay: #{$i * 0.15}s; } } } // &:nth-of-type(1) { // .progress { // transition-delay: .4s; // } // } // &:nth-of-type(2) { // .progress { // transition-delay: .8s; // } // } // &:nth-of-type(3) { // .progress { // transition-delay: 1s; // } // } // &:nth-of-type(4) { // .progress { // transition-delay: 1.4s; // } // } // &:nth-of-type(5) { // .progress { // transition-delay: 1.8s; // } // } } .pg-data { display: block; width: 0.12rem; height: 100%; margin: 0 auto; background: linear-gradient(0deg, #c88eff 0%, #7e5cff 100%); box-shadow: 0 -0.04rem 0.14rem 0 rgba(129, 93, 255, 0.4); border-radius: 0.05rem 0.05rem 0 0; } // 0分展示规则 .nodata { .pg-data { border-radius: 0; background: #e7e7e7; box-shadow: none; } } .week { font-size: 0.2rem; line-height: 0.2rem; margin-top: 0.08rem; color: #666; } // 环图 - data02数据部分 .data02-charts { margin-top: 0.32rem; height: 1.61rem; } .canvas-box { position: relative; float: left; width: 1.61rem; height: 1.61rem; margin-left: 0.92rem; } .my-canvas { width: 1.61rem; height: 1.61rem; } .clr-canvas { position: absolute; top: 0; left: 0; } .canvas-data { position: absolute; top: 0.56rem; left: 0; right: 0; margin: auto; margin-left: -0.1rem; text-align: center; font-size: 0.24rem; .num { font-size: 0.32rem; font-weight: 600; } } </style>

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!