H5 애니메이션--원의 캔버스 그리기 비율 진행률의 예

1. 효과 그림

2. 원리
첫 번째 단계는 원하는 색상으로 완전한 원을 그리는 것이고, 두 번째 단계는 바깥쪽 원보다 반경이 작은 내부 원을 그리는 것입니다. 색상이 사용자 정의되었습니다
마지막 단계는 다음과 같습니다. 백분율과 사용자 정의 색상으로 세 번째 원을 그립니다.
동적 그리기의 세 번째 단계 효과를 얻으려면 타이머 기능을 추가하고, 가끔씩 거리를 그리고 임계값을 설정하세요.
이 임계값보다 크면 타이머를 지우세요. 실제로 이 임계값은 , 표시할 백분율 값입니다. 0.01을 그릴 때마다
참고: 타이머에서 그릴 때 두 번째 단계에서 안쪽 원을 그려야 하며 빈 원도 타이머에 그려집니다.

3. 지식 포인트
그리기 공식: arc(x, y, radius, startRad, endRad, anticlockwise)
좌표점(x, y)을 중심으로 하고 반경을 반경으로 하여 캔버스에 원을 그립니다. .호. 이 호의 시작 호는 startRad이고 끝 호는 endRad입니다. 여기서 라디안은 x축의 양의 방향(시계의 3시 방향)을 기준으로 시계 방향 회전 각도로 계산됩니다. 반시계방향(Anticlockwise)은 반시계방향으로 그리기 시작할 것인지, 시계방향으로 시작할 것인지를 나타냅니다. true이면 시계 반대 방향을 의미하고, false이면 시계 방향을 의미합니다. 반시계방향 매개변수는 선택사항이며 기본값은 시계방향을 의미하는 false입니다.

4.js소스 코드

<script src="jquery.min.js"></script><script>function circleProgress(value,average){
    var canvas = document.getElementById("yuan");    var context = canvas.getContext(&#39;2d&#39;);    var _this = $(canvas),
    value= Number(value),// 当前百分比,数值
    average = Number(average),// 平均百分比
    color = "",// 进度条、文字样式
    maxpercent = 100,//最大百分比，可设置
    c_width = _this.width(),// canvas，宽度
    c_height =_this.height();// canvas,高度
    // 判断设置当前显示颜色
    if( value== maxpercent ){
        color="#29c9ad";
    }else if( value> average ){
        color="#27b5ff";
    }else{
        color="#ff6100";
    }    // 清空画布
    context.clearRect(0, 0, c_width, c_height);    // 画初始圆
    context.beginPath();    // 将起始点移到canvas中心
    context.moveTo(c_width/2, c_height/2);    // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2，起始点0，终止点为Math.PI * 2的 整圆
    context.arc(c_width/2, c_height/2, c_height/2, 0, Math.PI * 2, false);
    context.closePath();
    context.fillStyle = &#39;#ddd&#39;; //填充颜色
    context.fill();    // 绘制内圆
    context.beginPath();
    context.strokeStyle = color;
    context.lineCap = &#39;square&#39;;
    context.closePath();
    context.fill();
    context.lineWidth = 10.0;//绘制内圆的线宽度

    function draw(cur){
        // 画内部空白  
        context.beginPath();  
        context.moveTo(24, 24);  
        context.arc(c_width/2, c_height/2, c_height/2-10, 0, Math.PI * 2, true);  
        context.closePath();  
        context.fillStyle = &#39;rgba(255,255,255,1)&#39;;  // 填充内部颜色
        context.fill();        // 画内圆
        context.beginPath();        // 绘制一个中心点为（c_width/2, c_height/2），半径为c_height/2-5不与外圆重叠，
        // 起始点-(Math.PI/2)，终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
        context.arc(c_width/2, c_height/2, c_height/2-5, -(Math.PI / 2), ((Math.PI * 2) * cur ) - Math.PI / 2, false);
        context.stroke();        //在中间写字  
        context.font = "bold 18pt Arial";  // 字体大小，样式
        context.fillStyle = color;  // 颜色
        context.textAlign = &#39;center&#39;;  // 位置
        context.textBaseline = &#39;middle&#39;;  
        context.moveTo(c_width/2, c_height/2);  // 文字填充位置
        context.fillText(value+"%", c_width/2, c_height/2-20);
        context.fillText("正确率", c_width/2, c_height/2+20);
    }    // 调用定时器实现动态效果
    var timer=null,n=0;    function loadCanvas(nowT){
        timer = setInterval(function(){
            if(n>nowT){
                clearInterval(timer);
            }else{
                draw(n);
                n += 0.01;
            }
        },15);
    }
    loadCanvas(value/100);
    timer=null;
}; 
</script>

마지막으로 CircleProgress 메서드를 호출하고 해당 매개변수를 전달해야 합니다. 블로거는 이렇게 썼는데, 버튼을 클릭하면 실행됩니다. . .

<input onclick="circleProgress(10,50)" value="画圆" type="button"><canvas id="yuan"></canvas>

【관련 추천】

1. HTML5 캔버스 기본 그리기 - 곡선 그리기

2. 캔버스에서 호 및 링 진행률 표시줄을 구현하는 방법에 대한 자세한 설명

3. 원형 진행률 표시줄 예제 코드

4.

co를 사용하여 비동기 프로세스를 처리하는 미니 프로그램 개발 예제 튜토리얼

5

순환 동적 로딩 진행의 H5 캔버스 구현 예

위 내용은 H5 애니메이션--원의 캔버스 그리기 비율 진행률의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!