在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ canvas 封裝方法的問題，save與beginPath

canvas 封裝方法的問題，save與beginPath

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>

</head>
<body>

<canvas width="600" height="300" id="cas"> </canvas>

</body>
</html>

js區(qū)域

這里是沒有使用beginPath的方法，創(chuàng)建的實例各個之間不相互影響

var cas = document.querySelector('#cas');

var cc = cas.getContext('2d');

// cc.beginPath

//封裝
function Rect(config) {
   /* this.ctx = config.ctx;
    this.x0 = config.x0;
    this.y0 = config.y0;
    this.x1 = config.x1;
    this.y1 = config.y1;
    this.lineWidth = config.lineWidth;
    this.strokeStyle = config.strokeStyle;
    this.fillStyle = config.fillStyle;
    this.lineCat = config.lineCat;
    this.lineJoin = config.lineJoin;*/
    for (var i in config) {
        this[i] = config[i]
    }
}



Rect.prototype = {
    constructor: Rect,
    fillRect: function(){

// this.ctx.beginPath();

        this.ctx.save();
        this.ctx.lineWidth = this.lineWidth;
        if (this.fillStyle) {
            this.ctx.fillStyle = this.fillStyle;
        }
        this.ctx.fillRect(this.x0, this.y0, this.x1, this.y1);
        this.ctx.restore();
    },
    strokeRect: function(){

// this.ctx.beginPath();

        this.ctx.save();
        this.ctx.lineWidth = this.lineWidth;
        if (this.strokeStyle) {
            this.ctx.strokeStyle = this.strokeStyle;
        }
        this.ctx.strokeRect(this.x0, this.y0, this.x1, this.y1);
        this.ctx.restore();
    }
}

var rect = new Rect({
    ctx: cc,
    x0: 10,
    y0: 10,
    x1: 120,
    y1: 120,
    lineWidth: 3,
    fillStyle: 'red'
})
rect.fillRect();

// cc.beginPath();

var rect1 = new Rect({
    ctx: cc,
    x0: 200,
    y0: 150,
    x1: 120,
    y1: 120,
    lineWidth: 3,
    fillStyle: 'blue'
})
rect1.fillRect();

var rect2 = new Rect({
    ctx: cc,
    x0: 50,
    y0: 50,
    x1: 120,
    y1: 120,
    lineWidth: 10,
    fillStyle: 'yellow'
})
rect2.fillRect();

這是封裝圓的方法，但是創(chuàng)建的實例，后創(chuàng)建的會覆蓋之前的，除非加beginPath才可以解決

function Circle(config) {

    for (var i in config) {
        this[i] = config[i];
    }
}
Circle.prototype = {
    constructor: Circle,
    stroke: function() {

// this.ctx.beginPath();

        this.ctx.save();

// this.ctx.lineWidth = this.lineWidth || {};

        this.ctx.strokeStyle = this.strokeStyle || {};
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.arc(this.x0, this.y0, this.r, this.start, this.end);
        this.ctx.closePath();

        this.ctx.stroke();
        this.ctx.restore();

// this.ctx.closePath();

    },
    fill: function() {

// this.ctx.beginPath();

        this.ctx.save();
        this.ctx.lineWidth = this.lineWidth || {};
        this.ctx.fillStyle = this.fillStyle || {};
        this.ctx.moveTo(this.x0, this.y0);

        this.ctx.arc(this.x0, this.y0, this.r, this.start, this.end);
        this.ctx.closePath();
        this.ctx.fill();
        this.ctx.restore();

// this.ctx.closePath();

    }

}
var circle = new Circle({
    ctx: cc,
    x0:100,
    y0: 100,
    r: 100,
    start: 0,
    fillStyle: 'red',
    end: 2* Math.PI
})

// circle.stroke();

circle.fill()

var circle1 = new Circle({
    ctx: cc,
    x0:260,
    y0: 200,
    r: 50,
    lineWidth: 5,
    fillStyle: 'blue',
    start: 0,
    end: 2* Math.PI
})

// cc.beginPath();

//    circle1.beginPath();

circle1.fill();
回答
編輯回答
青瓷

你不用fillrect 用rect再fill 一樣被覆蓋,canvas是基于狀態(tài)的,你用fillrect 內(nèi)部會處理的,讓當(dāng)前狀態(tài)結(jié)束

2017年12月5日 14:38