如何绘制现有绘制的画布元素？答案

【问题标题】：How to draw over existing drawn canvas element?如何绘制现有绘制的画布元素？
【发布时间】：2021-12-21 13:24:00
【问题描述】：

我有一个 OpenLayers 地图，其中包含带有时间步长的 WMS 图层。我正在尝试创建一个循环来更新每个步骤的时间，并在渲染后保存图像。目前我取自官方OpenLayers documentation，它创建了一个画布元素，然后由地图元素填充。我有一个似乎可以工作的循环，但它只下载第一步（即使我知道我的更新时间功能有效）。

mapToCanvasList: function () {
    for(let i = 0 ; i < 10 ; i++)
    {
        this.renderflag = false;
        this.setTimeSurface10();
        this.map.renderSync();
        this.myCallback();
        this.map.on('rendercomplete', this.flagCallback());
        if (this.renderflag) continue;
    }
},
flagCallback: function () {
    this.renderflag = true;
},
myCallback: function () {
    this.renderflag = false
    var mapCanvas = document.createElement('canvas');
    var divElement = document.querySelector(".map");
    mapCanvas.width = divElement.offsetWidth;//size[0];
    mapCanvas.height = divElement.offsetHeight;//size[1];
    var mapContext = mapCanvas.getContext('2d');
    Array.prototype.forEach.call(
        document.querySelectorAll('.ol-layer canvas'),
        function (canvas) {
            if (canvas.width > 0) {
                const opacity = canvas.parentNode.style.opacity;
                mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                const transform = canvas.style.transform;
                const matrix = transform
                                        .match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line
                                        .split(',')
                                        .map(Number);
                CanvasRenderingContext2D.prototype.setTransform.apply(mapContext,matrix);
                mapContext.drawImage(canvas, 0, 0);
            }
        }
    );
    this.gif.addFrame(mapCanvas, {copy:true, delay: 200});
    mapCanvas.remove();
    this.renderflag = true;
},
setTimeSurface10: function () {
    if (this.currentTimeSurface10 === null) {
        this.currentTimeSurface10 = this.startTimeSurface10;
    } else if (this.currentTimeSurface10 >= this.endTimeSurface10) {
        this.currentTimeSurface10 = this.startTimeSurface10;
    } else {
        this.currentTimeSurface10 = new Date(
            this.currentTimeSurface10.setMinutes(this.currentTimeSurface10.getMinutes() + 60)
        );
    }
    this.surface10.getSource().updateParams({ TIME: this.currentTimeSurface10.toISOString().split(".")[0] + "Z" });
}

【问题讨论】：

标签： javascript html vue.js canvas openlayers

【解决方案1】：

ol-ext 扩展有一个ol/control/VideoRecorder 以将地图保存为视频：https://viglino.github.io/ol-ext/examples/misc/map.control.videorecorder.html

您可以挖掘代码以查看其运行情况。

【讨论】：