使用图像静态使用openlayers canvas源

Question

我一直在尝试使用OpenLayers（v6.1.1）来绘制画布，但不幸的是，我正在努力实施画布。

我已经尝试了这种简单的方法：

const extent = [0, 0, 1024, 968];

const projection = new ol.proj.Projection({
  code: 'pixel-projection',
  units: 'pixels',
  extent: extent,
});

let canvas = document.createElement('canvas');

canvas.width = 1024;
canvas.height = 968;
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 100, 100);

const imageLayer = new ol.layer.Image({
  source: new ol.source.ImageCanvas({
    canvas: canvas,
    projection: projection,
    imageExtent: extent,
  }),
});

但是我遇到了一个未定义的错误：

另外，这是一个轻松导航的小提琴：

https://jsfiddle.net/loque/urque/ur5gw270/4/感谢，谢谢。

Answer 1

imagecanvas需要canvasFunction选项：

  source: new ol.source.ImageCanvas({
    canvasFunction: function() {
      return canvas;
    },
    projection: projection,
    imageExtent: extent,
    ratio: 1,
  }),

Imagestatic需要url选项：

  source: new ol.source.ImageStatic({
    url: canvas.toDataURL(),
    projection: projection,
    imageExtent: extent,
  }),