CanvasContext.restore

2020-08-26 16:39 更新

解釋:恢復(fù)之前保存的繪圖上下文。

方法參數(shù)

示例



圖片示例

代碼示例 1 

在開發(fā)者工具中打開

<canvas canvas-id="myCanvas" class="myCanvas" />

Page({
    onLoad() {
        const canvasContext = swan.createCanvasContext('myCanvas');
        // 保存默認(rèn)填圖樣式
        canvasContext.setFillStyle('red');
        canvasContext.save();
        canvasContext.setFillStyle('blue');
        canvasContext.fillRect(10, 10, 150, 100);

        // 恢復(fù)之前保存的狀態(tài)
        canvasContext.restore();
        canvasContext.fillRect(50, 50, 150, 100);

        canvasContext.draw();
    }
});

圖片示例

代碼示例 2 

在開發(fā)者工具中打開

<canvas canvas-id="myCanvas" class="myCanvas" />
Page({
    onLoad() {
        const ctx = swan.createCanvasContext('myCanvas');
        ctx.setFillStyle('blue');
        ctx.fillRect(0,0,15,15);
        ctx.save(); //保存上述設(shè)置的繪制狀態(tài)

        //重新定義新的繪制狀態(tài),并繪制矩形
        ctx.setFillStyle('#E0E4CD');
        ctx.setShadow(10, 10, 4, 'red');
        ctx.fillRect(30,0,30,30);

        // 恢復(fù)到初始的繪制狀態(tài)繪制圓形,與save()之前畫的圖保持一致
        ctx.restore();
        ctx.beginPath();
        ctx.arc(100, 75, 8, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
        ctx.draw()
    }
});


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號