zoukankan      html  css  js  c++  java
  • canvas_29 动画-圆形进度条

    <template>
        <view class="zcvs">
    
            <view class="zcvs-item">
                <view>
                    <canvas canvas-id="cvs" id="cvs" style=" 400px; height: 400px;border: 1px solid #007AFF;" />
                </view>
            </view>
    
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    
                };
            },
            onReady() {
                this.drawCvs();
            },
            methods: {
                drawCvs() {
                    const ctx = uni.createCanvasContext('cvs');
    
                    // pi 将圆的周长划分为100份,rate为实际百分比,-25是圆的初始起点
                    let [pi, rate] = [Math.PI * 2 / 100, -25];
    
                    let gradient = ctx.createLinearGradient(200, 0, 200, 400);
                    gradient.addColorStop(0, "#11ffe4");
                    gradient.addColorStop(0.5, "#03c6fd");
                    gradient.addColorStop(1, "#ff5500");
    
                    var draw = () => {
                        ctx.clearRect(0, 0, 400, 400);
                        ctx.shadowBlur = 0;
                        ctx.arc(200, 200, 150, 0, 2 * Math.PI, false);
                        ctx.stroke();
    
                        ctx.beginPath();
                        ctx.fillText(rate + 25 + "%", 200, 200);
    
                        ctx.beginPath();
                        ctx.setStrokeStyle(gradient);
                        ctx.shadowBlur = 15;
                        ctx.arc(200, 200, 150, pi * -25, pi * rate, false);
                        ctx.stroke();
    
                        ctx.draw();
                    };
    
                    var start = () => {
                        ctx.setFillStyle("#fff");
                        ctx.setStrokeStyle("#15222d");
                        ctx.shadowColor = '#10fae7';
                        ctx.setLineCap("round");
                        ctx.setLineWidth(15);
                        ctx.font = "80px Lato";
                        ctx.setTextAlign("center");
                        ctx.setTextBaseline("middle");
    
                        if (rate < 75) {
                            rate++;
                            draw();
                            window.requestAnimationFrame(start);
                        }
                    };
    
                    start();
                },
            }
        }
    </script>
    
    <style lang="scss" scoped>
        .zcvs {
            background-color: #0f1922;
        }
    </style>
  • 相关阅读:
    树(三)——自平衡二叉树(AVL)
    树(二)——二叉树
    10. IDENTITY属性使用小结
    09. 约束与索引的联系
    08. 删除重复&海量数据
    07. 分页写法小结
    06. 父子节点(树)遍历写法小结
    01. SQL Server 如何读写数据
    05. 取SQL分组中的某几行数据
    04. 字符串合并与拆分写法小结
  • 原文地址:https://www.cnblogs.com/luwei0915/p/15306089.html
Copyright © 2011-2022 走看看