---
title: CanvasSource
source: https://vjmap.com/doc/CanvasSource.html
---

# CanvasSource
**扩展图像源**


包含 HTML 画布内容的数据源。有关`选项`的详细文档，请参阅[CanvasSourceOptions][269]。

### Parameters
- `id` **`string`**
- `options` **画布来源规范**
- `dispatcher` **调度员**
- `eventedParent` **`事件发生`**

### Examples
```
// add to map
map.addSource('some id', {
   type: 'canvas',
   canvas: 'idOfMyHTMLCanvas',
   animate: true,
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

// update
var mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove
```

### play
启用动画。图像将从画布复制到每一帧的地图。

### pause
禁用动画。地图将显示画布图像的静态副本。

### getCanvas
返回 HTML`canvas`元素。

返回**`HTMLCanvasElement `**HTML`canvas`元素。

### setCoordinates
设置画布的坐标并重新渲染地图。

#### Parameters
- `coordinates` **`Array`< `Array`< `number`\>>**四地理坐标，表示为经度和纬度的数字阵列，它定义了画布的角上。坐标从画布的左上角开始并按顺时针顺序进行。它们不必表示一个矩形。

返回**[CanvasSource][270]**这个