第一次用canvas画图,代码仅供参考;
首先创建canvas标签:
<canvas className={styles.progress} id="time_graph_canvas" width="240" height="240"></canvas>
然后在componentDidMount里执行,这里的Percentage是需要的百分比值。我定义在jsx全局,因为要在render的时候获取到百分比值。
componentDidMount() { let ele = document.getElementById("time_graph_canvas") let circle = ele.getContext("2d"); //创建背景圆 circle.lineWidth = 6; circle.strokeStyle = 'rgba(0,0,0,0)'; circle.lineCap = 'round'; circle.beginPath();//开始一个新的路径 circle.arc(70, 70, 67, 0, 2 * Math.PI, false);///用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针) circle.stroke();//对当前路径进行描边 //创建渐变圆环 let g = circle.createLinearGradient(32, 0, 20, 20); //创建渐变对象 渐变开始点和渐变结束点 g.addColorStop(0, '#33e4a8'); //添加颜色点 g.addColorStop(1, '#3ea8ef'); circle.lineWidth = 6 //设置线条宽度 circle.strokeStyle = g; circle.beginPath();//开始一个新的路径 circle.arc(70, 70, 67, -Math.PI / 2, -Math.PI / 2 + Percentage * (Math.PI * 2 / 100), false); circle.stroke();//对当前路径进行描边 }当canvas的画布需要根据不同终端的font-size适配时,我这里获取了window的outerWidth和innerWidth,计算出缩放比后将计算好画布宽高除以2后再除以缩放比,下面是代码let fontSizeWidth = window.outerWidth / window.innerWidthlet canvasWidth = 70 / fontSizeWidth; ele.setAttribute('width', canvasWidth + 'px'); ele.setAttribute('height', canvasWidth + 'px');