标签：otto context tco bsp raw base linear lun idm
import React from ‘react‘;
import Tools from ‘../../tools/index‘
export default class PercentageRing extends React.Component {
constructor(props){
super(props);
}
componentDidMount() {
let canvas = this.refs.ring;
let width = canvas.offsetWidth;
let height = canvas.offsetHeight;
let context = canvas.getContext(‘2d‘);
// this.rings();
let i = 1;
let percent = 30;
this.timerId = setInterval(()=>{
i >= percent && clearInterval(this.timerId);
context.clearRect(0,0,width+10,height);
this.draw(i++);
},50)
}
draw(i){
let canvas = this.refs.ring;
let width = canvas.offsetWidth;
let height = canvas.offsetHeight;
let context = canvas.getContext(‘2d‘);
let rad = Math.PI*2/100;
canvas.width = width;
canvas.height = height;
// 绘制一个圆
context.beginPath(); // 开始创建路径
context.arc(width/2,height/2,height/2-10,0,2*Math.PI,false);
context.lineWidth = 10;
context.strokeStyle="#12365a"; // 轮廓颜色
context.lineCap = "round"; // 绘制圆帽
context.stroke(); // 通过线条来绘制轮廓
context.closePath(); // 关闭路径
// this.draw();
context.beginPath();
context.font = `${72/320}rem PingFang SC`;
context.textAlign = ‘right‘;
context.textBaseline = ‘bottom‘;
context.fillStyle="#00a8ff";
context.fillText(‘%‘,width/2+110,height/2+25);
context.stroke();
context.closePath();
// 绘制半圆
context.beginPath();
context.arc(width/2,height/2,height/2-10,-Math.PI/2,-Math.PI/2+i*rad,false);
context.lineWidth = 10;
// 创建渐变颜色
let linearGrad = context.createLinearGradient(0,0,width,height);
linearGrad.addColorStop(0.0, ‘#02a7ff‘);
linearGrad.addColorStop(0.25, ‘#1da1fb‘);
linearGrad.addColorStop(0.5, ‘#5893f4‘);
linearGrad.addColorStop(0.75, ‘#9484ec‘);
context.strokeStyle = linearGrad;
context.stroke();
context.closePath();
// 绘制文本信息
context.beginPath();
context.font = `${236/302}rem PingFang SC`;
context.textAlign = ‘center‘;
context.textBaseline = ‘middle‘;
context.fillStyle = "#00a8ff";
context.fillText(i.toFixed(0),width/2,height/2); // 绘制文本最大宽度
context.stroke();
context.closePath();
}
componentWillUnmount(){
this.timerId && clearInterval(this.timerId);
}
render() {
return (
<div className="perent-ring-box">
<canvas className="perent-canvas" ref=‘ring‘>
<p>请使用最新的谷歌、火狐、IE浏览器</p>
<p>您的浏览器不支持</p>
</canvas>
</div>
)
}
}
react canvas圆环动态百分比
标签：otto context tco bsp raw base linear lun idm
原文地址：https://www.cnblogs.com/BlogRegisterAspx/p/10396033.html
