zoukankan      html  css  js  c++  java
  • vue 使用canvas画类似的百分比球形

    <template>
        <div>
            <canvas id="myCanvas" :width="width" :height="height"></canvas>
        </div>
    </template>
    
    <script>
    export default {
        data () {
            return {
                ele: null  
            }
        },
        props: {
             {
                type: String,
                default: '200'
            },
            height: {
                type: String,
                default: '200'
            },
            src: {
                type: String,
                default: require('./dashback.png')
            },
            percent: {
                type: String,
                default: 75
            },
            pad {
                default: 0.75           
            },
            border {
                default: 20           
            },       
                 
        },
        methods: {
            PI (deg)
            {
                return (deg/100)*2*Math.PI;
            },
            draw () {
                let can = document.getElementById("myCanvas")
                let cxt = can.getContext("2d")
                cxt.clearRect(0,0,this.width,this.height)
                let img = new Image()
                img.src = this.src
                img.onload = () => {
                    cxt.drawImage(img,0,0,this.width,this.height);
    
                    /* 文字 */
                    cxt.fillStyle="#ffffff";
                    cxt.font = "47px Arial"
                    cxt.fillText(this.percent,(parseInt(this.width)-70)/2,(parseInt(this.height)+29)/2)
    
                    cxt.font = "18px Arial"
                    cxt.fillText("",(parseInt(this.width)+36)/2,(parseInt(this.height)+29)/2)
    
                    cxt.beginPath();
                    cxt.arc(parseInt(this.width)/2, parseInt(this.height)/2, this.padwidth*this.width/2, this.PI(100), this.PI(0), true)
                    cxt.lineWidth = this.borderwidth*0.6;
                    cxt.strokeStyle = 'rgba(255,255,255,.35)';
                    cxt.shadowOffsetX = 0
                    cxt.shadowOffsetY = 0
                    cxt.shadowColor = 'rgb(100,100,100)'
                    cxt.shadowBlur = 10
                    cxt.stroke();      
    
                    cxt.beginPath();
                    cxt.arc(parseInt(this.width)/2, parseInt(this.height)/2, this.padwidth*this.width/2, this.PI(this.percent), this.PI(0), true);
                    cxt.lineWidth = this.borderwidth;
                    cxt.strokeStyle = 'white';
                    cxt.shadowOffsetX = 0
                    cxt.shadowOffsetY = 0
                    cxt.shadowColor = 'rgb(100,100,100)'
                    cxt.shadowBlur = 10
                    cxt.stroke();  
                }            
            }        
        },
        mounted: function () {          
            this.draw()        
        },
        created: function () {
    
        },
        watch: {
            'percent': function(newVal){
                this.draw()
            }
        }
    }
    </script>

    使用

    <dash-board percent="45"></dash-board>  

    效果

    原图

  • 相关阅读:
    我喜欢的乐队-Descending
    SQL合并时间段的问题
    基本字符串相关函数,基本宏,内存相关函数,类型转换函数实现合集
    centos7.4 安装 .net core 2.2
    在Global.asax中 注册Application_Error事件 捕获全局异常
    一般后台系统数据库 用户权限设计
    API接口利用ActionFilterAttribute实现接口耗时检测
    Git 一般性操作
    tasks.json 配置 解决vscode控制台乱码问题
    iview发布到IIS 路由问题
  • 原文地址:https://www.cnblogs.com/hzsu/p/10910455.html
Copyright © 2011-2022 走看看