html5 - canvas绘制圆环的问题

问题描述

问 题

用canvas绘制了一个圆环 然后在圆环上绘制了一个沿着圆环运动的原点

现在改变了圆环的半径 该如何写让圆点继续在圆环的轨迹上运动呢

 var canvas=document.getElementById('clock');
        var ctx=canvas.getContext('2d');
        // 绘制外环
        ctx.beginPath();
        ctx.arc(275,330,80,0,2*Math.PI,true);        
        ctx.strokeStyle='#8dc9f8';
        ctx.lineWidth='3'
        ctx.stroke();
        ctx.closePath();
    
        
        // 绘制动画需要重置幕布，所以重建一个canvas对象
        var pointer=document.getElementById('pointer');
        var ctxPoint=pointer.getContext('2d');
        function run(inputValue){
            var timer;
            var i=0;
            ctxPoint.translate(375,330);
            ctxPoint.fillStyle ='#fff';
            ctxPoint.strokeStyle='#fff';
            // 设置最终的值
            var finalValue=inputValue;
            var value=0;
            // 根据值的大小确定应该到达的位置
            if(finalValue<=3){
                value=(450-316.7)*0.225;
            }else if(finalValue<=6){
                value=(130)*0.9;
            }else if (finalValue <=9){
                value=(240)*0.9;    
            }
            else{
                value=finalValue<1?1:finalValue;
                //0刻度位置
                value=(value-700)*0.4+180;
            }
           
            ctxPoint.font='95px bold';
            ctxPoint.textAlign='center';
            ctxPoint.shadowColor='#fff';
            // 所有的动画事件
            function slideValue(){
                ctxPoint.translate(-275,-330);
                ctxPoint.clearRect(0,0,pointer.width,pointer.height);
                ctxPoint.translate(275,330);
                i++;
                // 绘制滚动元素
                ctxPoint.beginPath();
                ctxPoint.shadowBlur=30;
               
                ctxPoint.fillStyle='#8dc9f8';
                ctxPoint.fill();
                ctxPoint.arc(-180*Math.sin((i+60)/180*Math.PI),180*Math.cos((i+60)/180*Math.PI),3,0,2*Math.PI,true);
                ctxPoint.fillStyle='#fff';
                ctxPoint.fill();

解决方案

很容易啊，同时让点跟着半径变化就可以，就比如说圆的半径为r，点的坐标为：

x = r * cos(a);

y = r * sin(a);

点的运动只要改变角度a就行了

这篇关于html5 - canvas绘制圆环的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！