canvas 원형 애니메이션 로드 진도 막대 그리기
<div class="circle">
<canvas-circle v-for="(item,index) in cicleList" :key="index" :percent="item.ratio" :id="index"></canvas-circle>
</div>
import canvasCircle from './canvasCircle'
export default {
components: {
canvasCircle
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
val:true,
url:"",
cicleList: [{
ratio: '35'
},{
ratio: '65'
},{
ratio: '85'
}]
}
}
}
<template>
<div class="canvas">
<canvas :id="id" width="160" height="160" style="width:80px;height:80px;"></canvas>
</div>
</template>
<script>
export default {
data () {
return {
num:0,
canvas: '',
context: '',
cirX: '',
cirY: '',
rad: '',
n: 1,
speed: 150,
r: 36
}
},
props:[
'percent',
'id'
],
mounted () {
this.canvas = document.getElementById(this.id)
this.context = this.canvas.getContext("2d")
this.context.scale(2,2);
this.cirX = 40,//this.canvas.width/ 2
this.cirY = 40,//this.canvas.height/ 2
this.rad = Math.PI * 2 / 100
this.DreamLoading()
},
created () {
},
methods:{
//
writeCircle(){
this.context.save(); //save restore canvas
this.context.beginPath(); //
this.context.strokeStyle = "#EEF0F5"; //
this.context.lineWidth = 5;
this.context.arc(this.cirX, this.cirY, this.r, 0, Math.PI * 2, false); //
this.context.stroke(); //
// this.context.restore();
this.context.closePath();
},
//
writeText(n){
this.context.save();
this.context.font = "20px Arial";
this.context.fillStyle="#49f"; //
this.context.fillText(n.toFixed(0)+"%",this.cirX - 20 ,this.cirY + 10); //
//context.strokeStyle = "#49f";
// context.strokeText(n.toFixed(0)+"%",cirX - 30 ,cirY +10); //
this.context.stroke();
this.context.restore();
},
//
writeBlue(n){
this.context.save();
this.context.strokeStyle = "#23B1B4";
this.context.lineWidth = 7;
this.context.lineCap = 'round';
this.context.beginPath();
this.context.arc(this.cirX, this.cirY, this.r, -Math.PI/2,-Math.PI/2+ this.rad*n, false);
this.context.stroke();
this.context.restore();
},
DreamLoading(){
console.log(this.n)
// ,
this.context.clearRect(0,0,this.canvas.width,this.canvas.height)
this.writeCircle();
this.writeText(this.n);
this.writeBlue(this.n)
// if(this.n < 100 && this.n <= 60){
if(this.n <= this.percent){
this.n= this.n+0.4;
}else {
return this.n = 0;
}
//setTimeout(DreamLoading,speed);
request
AnimationFrame(this.DreamLoading); } } }
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.