小程序开放平台

文档中心
基础
界面
网络
数据缓存
媒体
位置
开放接口
设备
XHSML
性能
文件
数据分析
画布
createCanvasContext
canvasPutImageData
canvasGetImageData
canvasToTempFilePath
CanvasContext
setFillStyle
setStrokeStyle
setShadow
createLinearGradient
createCircularGradient
addColorStop
setLineWidth
setLineCap
setLineJoin
setLineDash
setMiterLimit
rect
fillRect
strokeRect
clearRect
fill
stroke
beginPath
closePath
moveTo
lineTo
arc
scale
rotate
translate
setFontSize
fillText
setTextAlign
setTextBaseline
drawImage
setGlobalAlpha
measureText
strokeText
setLineDashOffset
bezierCurveTo
quadraticCurveTo
save
restore
draw
setTransform

xhs.restore

开发
>
JS API
>
画布
>
CanvasContext
>
restore
>
更新时间:2024-11-13 19:05:33

恢复之前保存的绘图上下文。

参数

示例代码

Page({
    onLoad() {
        const canvasContext = xhs.createCanvasContext('myCanvas');
        // 保存默认填图样式
        canvasContext.setFillStyle('red');
        canvasContext.save();
        canvasContext.setFillStyle('blue');
        canvasContext.fillRect(10, 10, 150, 100);

        // 恢复之前保存的状态
        canvasContext.restore();
        canvasContext.fillRect(50, 50, 150, 100);
        
        canvasContext.draw();
    }
});
Page({
    onLoad() {
        const ctx = xhs.createCanvasContext('myCanvas');
        ctx.setFillStyle('blue');
        ctx.fillRect(0,0,15,15);
        //保存上述设置的绘制状态
        ctx.save(); 
    
        //重新定义新的绘制状态,并绘制矩形
        ctx.setFillStyle('#E0E4CD');
        ctx.setShadow(10, 10, 4, 'red');
        ctx.fillRect(30,0,30,30);
    
        // 恢复到初始的绘制状态绘制圆形,与save()之前画的图保持一致
        ctx.restore();
        ctx.beginPath();
        ctx.arc(100, 75, 8, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
        ctx.draw()
    }
});


该文档是否对您有帮助?