지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 캔버스 링 카운트다운 구성요소를 구현하는 방법

캔버스 링 카운트다운 구성요소를 구현하는 방법

不言
풀어 주다： 2018-06-14 16:08:34
원래의
1855명이 탐색했습니다.

이 글은 주로 캔버스 링 카운트다운 컴포넌트의 샘플 코드를 소개하고 있습니다. 내용이 꽤 괜찮아서 참고용으로 올려보겠습니다.

이 글에서는 캔버스 링 카운트다운 컴포넌트의 샘플 코드를 소개하고 자세한 내용을 공유합니다.

효과는 그림 1과 같습니다.

캔버스 링 카운트다운 컴포넌트

캔버스 링 카운트다운은 캔버스 기반의 카운트다운입니다. 모바일측에서는

캔버스 링 카운트다운 다운로드 주소를 사용하는 것을 권장합니다.

1.

1.html 코드

ID 속성을 사용할 수 있습니다. 

<canvas id="canvas"></canvas>
로그인 후 복사
로그인 후 복사

2. process.js 파일을 소개합니다.

페이지 re
<script src="js/process.js"></script>
로그인 후 복사

3 초기화 매개변수

를 

<script>
    window.onload = function () {
        let ctd = new Countdown();
        ctd.init();
    };

</script>
로그인 후 복사

할 수 있습니다.

2, 설정 매개변수는 설명합니다.

다음 매개변수는 필요하지 않으며 특정 요구에 따라 구성할 수 있습니다. 

window.onload = function () {
        let ctd = new Countdown();
        ctd.init({
            id: "canvas",         // ID，canvas一定要有ID属性
            size: 130,            // 绘制圆形的最大尺寸，宽=高
            borderWidth: 4,       // 边框宽度
            borderColor:"#fff",   // 边框颜色
            outerColor:"#fff",    // 最外层底圆颜色
            scheduleColor:"#fff", // 进度条动画颜色
            fontColor: "#fff",    // 字体颜色
            ringColor: "#ffc720", // 进度条环形颜色
            innerColor: "#4e84e5",// 最内圆底色
            fontSize: 50,
            time: 5
        });
    };
로그인 후 복사

3, 샘플 코드

html




    
    Title
    




    


<script src="js/process.js"></script>
<script>
    window.onload = function () {
        let ctd = new Countdown();
        ctd.init();
    };
</script>
로그인 후 복사

js

rreee

four, 추가 - 캔버스 준비 작업

캔버스에는 실제로가 없습니다. 너무 신비스러워서 다른 HTML 태그와 마찬가지로 H5 태그에 지나지 않습니다. 

/**
 * Created by 谭瞎 on 2018/3/15.
 */

function Countdown() {
    // 设置默认参数
    this.settings = {
        id: "canvas",         // ID，canvas一定要有ID属性
        size: 130,            // 绘制圆形的最大尺寸，宽=高
        borderWidth: 4,       // 边框宽度
        borderColor:"#fff",   // 边框颜色
        outerColor:"#fff",    // 最外层底圆颜色
        scheduleColor:"#fff", // 进度条动画颜色
        fontColor: "#fff",    // 字体颜色
        ringColor: "#ffc720", // 进度条环形颜色
        innerColor: "#4e84e5",// 最内圆底色
        fontSize: 50,
        time: 5
    }
}

Countdown.prototype.init = function (opt) {
    this.obj = document.getElementById(this.settings.id);
    this.obj.width = this.settings.size;
    this.obj.height = this.settings.size;
    this.ctx = this.obj.getContext("2d");
    extend(this.settings, opt);
    this.countdown();
};

// 绘制底色
Countdown.prototype.drawBackground = function () {
    this.drawCircle(0, 360, 0, this.settings.outerColor);
};
// 绘制进度条动画背景
Countdown.prototype.drawProcess = function () {
    this.drawCircle(0, 360, 4, this.settings.ringColor);
};

// 绘制倒计时
Countdown.prototype.drawInner = function () {
    this.drawCircle(0, 360, 23, this.settings.innerColor);
    this.strokeBorder(this.settings.borderWidth);
};

// 绘制进度条动画
Countdown.prototype.drawAnimate = function () {
    // 旋转的角度
    let deg = Math.PI / 180;
    let v = schedule * 360,
        startAng = -90,
        endAng = -90 + v;

    this.ctx.beginPath();
    this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2);
    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -3, startAng * deg, endAng * deg, false);
    this.ctx.fillStyle = this.settings.scheduleColor;
    this.ctx.fill();
    this.ctx.closePath();

};
// 绘制边框
Countdown.prototype.strokeBorder = function (borderWidth) {
    this.ctx.lineWidth = borderWidth;
    this.ctx.strokeStyle = this.settings.borderColor;
    this.ctx.stroke();
};
// 绘制文字
Countdown.prototype.strokeText = function (text) {
    this.ctx.textAlign = "center";
    this.ctx.textBaseline = "middle";
    this.ctx.font = this.settings.fontSize+"px"+ " microsoft yahei";
    this.ctx.fillStyle = this.settings.fontColor;
    this.ctx.fillText(text, this.settings.size / 2, this.settings.size / 2);
};
// 绘制圆
Countdown.prototype.drawCircle = function (startAng, endAng, border, fillColor) {
    let deg = Math.PI / 180;
    this.ctx.beginPath();
    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -border, startAng * deg, endAng * deg, false);
    this.ctx.fillStyle = fillColor;
    this.ctx.fill();
    this.ctx.closePath();
};
// 进度条动画
Countdown.prototype.countdown = function () {
    let oldTime = +new Date();
    timer = setInterval(() => {
        let allMs = this.settings.time * 1000,// 如30*1000=30 000ms
            currentTime = +new Date();
        // 步长=（当前的时间-过去的时间）/总秒数
        schedule = (currentTime - oldTime) / allMs;
        this.schedule = schedule;

        this.drawAll(schedule);
        if (currentTime - oldTime >= allMs) {
            // 重绘
            this.drawBackground();
            this.drawProcess();
            this.drawAnimate();
            this.drawInner();
            this.strokeText(0);
            clearInterval(timer);
        }
    }, 100);
};

// 绘制所有
Countdown.prototype.drawAll = function (schedule) {
    schedule = schedule >= 1 ? 1 : schedule;
    let text = parseInt(this.settings.time * (1 - schedule)) + 1;
    // 清除画布
    this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
    this.drawBackground();
    this.drawProcess();
    this.drawAnimate();
    this.drawInner();
    this.strokeText(text);
};

// 对象拷贝
function extend(obj1,obj2){
    for(let attr in obj2){
        obj1[attr] = obj2[attr];
    }
}
로그인 후 복사

주의하세요. 처음에 캔버스의 너비와 높이를 설정하는 것이 가장 좋으며(너비와 높이를 설정하지 않으면 브라우저는 기본적으로 캔버스 크기를 너비 300픽셀, 높이 100픽셀로 설정합니다) CSS를 사용하여 설정할 수 없습니다. (늘어납니다.) 캔버스 태그 안에 직접 작성하는 것이 좋습니다: 

<canvas id="canvas"></canvas>
로그인 후 복사
로그인 후 복사

캔버스 자체에는 그리기 기능이 없으며 모든 그리기 작업은 js를 통해 구현됩니다. 일반적으로 우리는 js에서 캔버스를 작동시키기 위해 getElementById를 사용합니다. 즉, 캔버스에 ID를 설정해야 합니다. 

<canvas id="canvas" width="130" height="130"></canvas>
로그인 후 복사

1. 브러시를 준비한 후 링을 시작할 수 있습니다. 실제로는 반지름이 다른 동심원 모양입니다. 중심 좌표는 (크기/2, 크기/2)입니다. 먼저 흰색 배경에 반지름이 크기/2인 가장 큰 원을 그립니다. 

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
로그인 후 복사

2. 두 번째 노란색 하단 원 그리기를 시작합니다. 원의 중심도 (크기/2, 크기/2)이지만 반경은 흰색 하단 원보다 4px 작습니다. 노란색 하단 원의 반경은 (크기/2-4)

let deg = Math.PI / 180;
// beginPath()可以做到隔离路径绘制效果的作用，防止之前的效果被污染。
ctx.beginPath();

// tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();
로그인 후 복사

3입니다. 마찬가지로 원의 중심은 (크기/2, 크기/2)입니다. ), 반경은 (size-23)이고 4px 흰색 테두리가 추가됩니다. 

let deg = Math.PI / 180;
// beginPath()可以做到隔离路径绘制效果的作用，防止之前的效果被污染。
ctx.beginPath();

// tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();
로그인 후 복사

4. 세로 중앙에 텍스트를 그립니다. 

let deg = Math.PI / 180;
// beginPath()可以做到隔离路径绘制效果的作用，防止之前的效果被污染。
ctx.beginPath();

// tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2-23, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();

// 白色边框
ctx.lineWidth = 4;
ctx.strokeStyle = #fff;
ctx.stroke();
로그인 후 복사

5. 사실 흰색 원을 그리는 과정이기도 합니다. 노란색 진행 표시줄을 천천히 덮는 과정입니다. 이때 흰색 원이 먼저 그려지면 흰색 애니메이션 원이 덮이게 됩니다. , 마지막 파란색 원이 그려집니다. 

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#fff";
// ctx.fillText(文字，相对画布的X坐标，相对画布的Y坐标)
ctx.fillText(30, size / 2, size / 2);
로그인 후 복사

6. 다음으로 애니메이션을 숫자와 연결하여 가장 빠른 시간을 얻은 다음 총 시간을 나누어야 합니다. 키. 백분율은 흰색 애니메이션 원이 그려지는 숫자와 각도의 변화를 결정합니다. 

let deg = Math.PI / 180;
ctx.beginPath();
// tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();
로그인 후 복사

프로세스 중심 버전

Countdown.prototype.countdown = function () {
    let oldTime = +new Date();// 过去的时间：1522136419291
    timer = setInterval(() => {
        let currentTime = +new Date();// 现在的时间：1522136419393
        let allMs = this.settings.time * 1000;// 总时间豪秒数：如30*1000=30 000ms
        schedule = (currentTime - oldTime) / allMs;// 绘制百分比：（1522136419393-1522136419291）/30000=0.0204
        this.schedule = schedule;
        this.drawAll(schedule);
        if (currentTime - oldTime >= allMs) {
            // 重绘
            this.drawBackground();
            this.drawProcess();
            this.drawAnimate();
            this.drawInner();
            this.strokeText(0);
            clearInterval(timer);
        }
    }, 10);
};

// 绘制所有
Countdown.prototype.drawAll = function (schedule) {
    schedule = schedule >= 1 ? 1 : schedule;
    let text = parseInt(this.settings.time * (1 - schedule)) + 1;
    // 清除画布
    this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
    this.drawBackground();
    this.drawProcess();
    this.drawAnimate();
    this.drawInner();
    this.strokeText(text);
};

// 绘制进度条动画
Countdown.prototype.drawAnimate = function () {
    // 旋转的角度
    let deg = Math.PI / 180;
    let v = schedule * 360,
        startAng = -90,// 开始角度
        endAng = -90 + v;// 结束角度

    this.ctx.beginPath();
    this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2);
    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false);
    this.ctx.fillStyle = this.settings.scheduleColor;
    this.ctx.fill();
    this.ctx.closePath();
};
로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

관련 추천:

캔버스를 사용하여 픽셀을 조작하는 방법


캔버스 선의 속성에 대하여


캔버스를 사용하여 그림 모자이크를 구현하는 방법


위 내용은 캔버스 링 카운트다운 구성요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
canvas 카운트다운
원천：php.cn
이전 기사：캔버스를 사용하여 픽셀을 조작하는 방법 다음 기사：CSS3을 사용하여 여러 요소를 순서대로 표시하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
캔버스의 *두* 높이 값을 얻으시겠습니까? 이 캔버스의 두 가지 높이 값을 얻으려고 합니다. <canvaswidth="886"height="792"style=&qu...
에서 2024-04-05 09:32:33
0
1
1360
여러 캔버스에서 jpg를 내보내는 방법 레이어로 사용되는 캔버스가 여러 개 있습니다. canvasc1=Backgroundimage.canvasc2=charactorimage.canvasc3=itemim...
에서 2024-04-03 21:02:43
0
1
319
Vite React 프로젝트를 저장할 때마다 기존 캔버스 요소를 바꾸는 대신 새 캔버스 요소가 페이지 본문에 추가되는 이유는 무엇입니까? 저는 ThreeJ를 배우기 시작하려고 합니다(저는 Javascript 웹 개발도 처음입니다). 몇 가지 튜토리얼을 본 후 Vite 및 React로 시작한 다음 기...
에서 2024-03-30 09:57:49
0
1
396
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿