猿问

Canvas 弧度转为百分比问题、求指教

代码:


<canvas class="canvas" width="500" height="500">不支持canvas时显示</canvas>

<script>

    // 获得画布

    var canvas = document.querySelector('.canvas');

    // 创建容器

    var context= canvas.getContext('2d');

    // 绘制圆形

    context.beginPath();

    context.arc(250, 250, 200, 0.7*Math.PI, 2.3 * Math.PI);

    context.lineWidth = 20;

    context.lineCap = 'round';

    context.strokeStyle = '#E54E1F';

    context.stroke();


    context.beginPath();

    // 此处最后一个参数 410*Math.PI/180为满格

    context.arc(250, 250, 200, 0.7*Math.PI, 2 * Math.PI);

    context.strokeStyle = '#FE845F';

    context.stroke();

</script>

效果:


疑问:


如何将第二个弧线用百分比来表示,例如我将其封装为函数,调用时传入0-100数值进去。平时没写过canvas现在临时抱佛脚···还请大神指教


天涯尽头无女友
浏览 731回答 2
2回答

aluckdog

context.arc(250, 250, 200, 0.7 * Math.PI, 0.7 * Math.PI + 1.6 * Math.PI / 100 * n);

慕婉清6462132

context.arc(250,&nbsp;250,&nbsp;200,&nbsp;0.7*Math.PI,&nbsp;0.7*Math.PI+1.6/100*n*Math.PI);n范围[0,100]
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答