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圆环动态百分比的更多相关文章

  1. [canvas]通过动态生成像素点做绚丽效果

    本例中的粒子就是实实在在的像素,由js代码在canvas上动态生成的像素点!这些像素点通过一个运动方法有规律地动了起来.透过这个思路,我们可以想到很多很炫的效果,但是这个性能有待考察.实验证明,动态控 ...

  2. Canvas制作动态进度加载水球

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. React Canvas:高性能渲染 React 组

    React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...

  4. 结合ItemsControl在Canvas中动态添加控件的最MVVM的方式

    今天很开心的收获: ItemsControl 中 ItemsPanel的重定义和 ItemContainerStyle 以及 ItemTemplate 三者的巧妙结合,在后台代码不实例化任何控件的前提 ...

  5. Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

    Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

  6. JS canvas标签动态绘制图型

    使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...

  7. react将表格动态生成视频列表【代码】【案例】

    只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html> <he ...

  8. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  9. React用dangerouslySetInnerHTML动态渲染HTML

    React用dangerouslySetInnerHTML动态渲染HTML React项目,需要把后台返回的一段html代码在页面上显示 在render获取内容, //在render里获取内容 con ...

随机推荐

  1. docker命令

    ## List Docker CLI commandsdockerdocker container --help ## Display Docker version and infodocker -- ...

  2. mySQL简单操作(二)

    1.like子句 [where clause like '%com'] '%' '_' 2.正则 3.union操作符 用于连接多个select语句,[distinct]删除重复数据 select c ...

  3. 关于.vbs文件恶搞,小伙伴电脑的

    这是,VBS是基于Visual Basic的脚本语言.VBS的全称是:Microsoft Visual Basic Script Edition.(微软公司可视化BASIC脚本版). 其语言类似Vis ...

  4. 'OFFSET' 附近有语法错误。 在 FETCH 语句中选项 NEXT 的用法无效。

    在使用asp.net core的时候,采用take().skip()分页的时候报如下错误: SqlException: 'OFFSET' 附近有语法错误. 在 FETCH 语句中选项 NEXT 的用法 ...

  5. 字符和字符串在Java中的旅程

    以下是个人对java中字符和字符串的见解,如有疏漏之处,还请不吝赐教. 下面通过一个简单的程序来说明字符和字符串在Java中的旅程. 以字符 ' 中 '为例, 它的GBK编码是2个字节:0xd6d0, ...

  6. Guitar Por如何演奏刮弦

    每当我们听到吉他现场演出的时候,看到吉他手在激烈的刮弦时,都觉得很酷,非常有感染力.刮弦在我们弹吉他或编曲时,会经常用到,虽然时间很短,但会为你加分不少. 那么我们应该如何演奏刮弦呢,我们先用E5和弦 ...

  7. python自学day1

    1.是区别Windows和linux在Python编码时不同: 在linux中,Python编码要在首行加入 #! /usr/bin/env python   指定编译的位置,而在Windows时中不 ...

  8. mysql中data和datatime的区别

    1.显示格式的区别 Date显示格式:YYYY-MM-DD:DateTime显示格式:YYYY-MM-DD HH:mm:ss. 2.显示范围的区别 Date显示范围是1601-01-01 到 9999 ...

  9. 移动质量(MQ)测试系列

    移动质量(MQ)测试 向移动开发者提供专业.稳定.全面.高价值的自动化测试平台. 发现 APP 中的各类隐患,包括 APP 崩溃.各类兼容性.功能性.性能问题等等. MQ 的 5 大功能(兼容性测试. ...

  10. StringBuffer的delete方法与deleteCharAt方法的区别。

    delete方法与deleteCharAt两个方法都是用来删除StringBuffer字符串指定索引字符的方法, delete(int  begin,int  end)有两个参数,使用时删除索引从be ...