h5 캔버스 원 진행률 표시줄의 예시 코드 공유-H5 튜토리얼-php.cn

h5 캔버스 원 진행률 표시줄의 예시 코드 공유

零下一度

풀어 주다： 2017-05-27 15:10:04

원래의

2496명이 탐색했습니다.

h5 캔버스 원 진행률 표시줄의 예제 코드를 구현하기 위한 많은 아이디어가 있지만 의심할 여지 없이 캔버스를 사용하는 것이 가장 편리한 솔루션입니다. 여기서는 캔버스 구현을 예로 들어 보겠습니다.

h5 캔버스 원 진행률 표시줄의 예시 코드 공유

Paste_Image.png

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
    </style>
    <!-- <script type="text/javascript" src="js/Progress.js"></script> -->
</head>
<body>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
    <canvas id="canvas3"></canvas>

    <canvas id="canvas8"></canvas>
    <canvas id="canvas9"></canvas>
    <canvas id="canvas10"></canvas>

    <script type="text/javascript">
    window.onload = function(){
        new Progress().renderOne(&#39;canvas1&#39;,100,6,10);//id，画布宽和高，圆的半径 百分百。
        new Progress().renderOne(&#39;canvas2&#39;,100,5,20);
        new Progress().renderOne(&#39;canvas3&#39;,100,5,30);

        new Progress().renderOne(&#39;canvas8&#39;,100,5,80);
        new Progress().renderOne(&#39;canvas9&#39;,100,5,90);
        new Progress().renderOne(&#39;canvas10&#39;,100,5,100);
    }
    function Progress() {
    var progress = { textheight: null, renderOne: function(id, length, r, percent) {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            canvas.width = length;
            canvas.height = length;
            var i = 0;
            var interval = setInterval(function() { i++;
                progress.render(context, length, r, i, percent);
                if (i >= percent) { clearInterval(interval) } }, 10) }, render: function(context, length, r, i, percent) { context.clearRect(0, 0, length, length);
            context.beginPath();
            var gradient = context.createLinearGradient(length, 0, 0, 0);
            gradient.addColorStop("0", "#76EEC6");
            gradient.addColorStop("1.0", "#63B8FF");
            context.strokeStyle = gradient;
            context.lineWidth = r;
            context.arc(length / 2, length / 2, length / 2 - r, -0.5 * Math.PI, -0.5 * Math.PI + i * 0.02 * Math.PI, false);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.strokeStyle = "#8d8d8d";
             context.strokeStyle =&#39;red&#39;;/////////////////////////////////////////////////
            context.lineWidth = 2;
            context.fillStyle = "#ffffff";
            context.arc(length / 2, r, 0.6 * r, 0, 2 * Math.PI, false);
            context.stroke();
            context.fill();
            context.closePath();
            context.beginPath();
            var radian = percent / 100 * 2 * Math.PI - 0.5 * Math.PI;
            var x = Math.cos(radian) * (length / 2 - r) + length / 2;
            var y = Math.sin(radian) * (length / 2 - r) + length / 2;
            context.arc(x, y, 0.6 * r, 0, 2 * Math.PI, false);
            context.stroke();
            context.fill();
            context.closePath();
            context.beginPath();
            context.lineWidth = 1;
            context.strokeStyle = "#54DDAF";
            context.fillStyle = "#54DDAF";
             context.fillStyle = "blue";///////////////////////////////////////
            context.arc(length / 2, length / 2, length / 2 - 2 * r, 0, 2 * Math.PI);
            context.fill();
            context.closePath();
            context.beginPath();
            context.font = "bold " + (length / 2 - 2.5 * r) / 2 + "px 微软雅黑";
            context.fillStyle = "#ffffff";
            var text = percent + "%";
            textwidth = context.measureText(text).width;
            if (this.textheight == null) {
                var p = document.createElement("p");
                document.body.appendChild(p);
                p.innerHTML = text;
                p.style.fontSize = ((length / 2 - 2.5 * r) / 2) + "px";
                this.textheight = p.offsetHeight;
                p.parentNode.removeChild(p) }
            textheight = this.textheight;
            context.fillText(text, (length - textwidth) / 2, length / 2 + textheight / 4);
            context.fill();
            context.closePath() } };
    return progress };



</script>
</body>
</html>

로그인 후 복사

【관련 권장사항】

1. H5 캔버스는 원형 동적 로딩 진행 예시를 구현합니다

2 캔버스는 원형 진행률 표시줄을 구현하고 디지털 백분율을 표시합니다

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

5. JS+캔버스 원 그리기 방법_자바스크립트 기술

위 내용은 h5 캔버스 원 진행률 표시줄의 예시 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!