用ES6写法 写一个canvas类,页面未生成canvas图像

    let canvasNode = document.getElementById('canvas'),
        ctxs = canvasNode.getContext("2d");

    console.log(canvasNode)


    class CircleProgress {
        constructor(ctxs, width, height, arc) {
            this.ctx = ctxs
            this.ctx.canvas.width = width
            this.ctx.canvas.height = width
            this.arc = arc
        }

        clearFill() {
            this.ctx.clearRect(0, 0, this.width, this.width);
        }

        fillBg() {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = '#ccc';
            this.ctx.arc(this.width / 2, this.width / 2, 45, 0, 2 * Math.PI);
            this.ctx.stroke();
        }

        fillArc(x) {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = '#ccc';
            this.ctx.arc(this.width / 2, this.width / 2, 45, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
            this.ctx.stroke();
        }

        fillText(x) {
            this.ctx.font = '14px' + ' Arial';
            this.ctx.fillStyle = 'red';
            this.ctx.textBaseline = "middle";
            this.ctx.textAlign = 'center';
            this.ctx.fillText(x.toFixed(1) + '%', this.width / 2, this.width / 2);
        }

        fill(x) {
            this.fillBg();
            this.fillArc(x);
            this.fillText(x);
        }

        testFn() {
            return this.ctx
        }

    }

    let cicle = new CircleProgress(ctxs, 100, 100, 10)

    cicle.fill(100)
阅读 2.5k
2 个回答
this.ctx.canvas.width = width
this.ctx.canvas.height = height
this.width = width
this.height = height

没有编译吧。浏览器不认识class

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏