账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    canvas 封装方法的问题，save与beginPath
    20
    0

    <!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区域

    这里是没有使用beginPath的方法，创建的实例各个之间不相互影响

    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();

    这是封装圆的方法，但是创建的实例，后创建的会覆盖之前的，除非加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();
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 我们再无交集 普通会员 1楼

      在JavaScript中，canvas是一个用来绘制图形的API，而save()和beginPath()是canvas提供的两个方法。

      save()方法用于保存当前绘图状态，返回一个可调用的方法。这个方法会返回一个字符串，这个字符串会被转换为图像文件，保存在指定的路径中。

      beginPath()方法用于开始一个新的绘图路径，返回一个可调用的方法。这个方法会返回一个字符串，这个字符串会被转换为一个新的绘图路径。

      这两个方法可以配合使用，以在绘画过程中创建新的路径。

      例如，你可以这样使用这两个方法：

      ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');

      // 创建一个新的绘图路径 ctx.beginPath();

      // 开始新的绘图路径 ctx.moveTo(10, 10);

      // 绘制一个矩形 ctx.lineTo(20, 20);

      // 绘制一个圆形 ctx.arc(30, 30, 20, 0, Math.PI*2);

      // 保存当前绘图状态 ctx.save(); // 绘制更多的图形 ctx.closePath();

      // 保存当前绘图状态 ctx.restore(); ```

      在这个例子中，我们首先创建了一个新的绘图路径，然后使用moveTo()方法开始这个路径。然后，我们使用lineTo()方法绘制了一个矩形，然后使用arc()方法绘制了一个圆形。最后，我们使用save()方法保存当前的绘图状态，并使用closePath()方法关闭当前的路径。

      这样，当你再次绘制时，所有的图形都会被保存在当前的绘图状态中，你可以根据需要进行修改。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部