Javascript 通过对象设置HTML画布上下文

到目前为止，我已经按照教程中的方式设置了HTML画布上下文，如：

我想知道是否可以通过将具有正确属性的对象传递给画布的某个方法来设置画布的上下文？例如：

var canvas = document.getElementById("canvas");


var context = {
    font: "15px calibri",
    ...
);

canvas.setContext(context);

原因是我正在用angular创建一个自定义画布。例如，我的

控制器将获得
元素。
服务中的方法将回调要为画布设置的上下文对象

自定义画布将转换为PNG，并设置为Google地图上标记的
图标。将标记添加到
服务中的地图中
：

addMarkerToMap: function(position, map, canvas) {
    new google.maps.Marker({
        position: position,
        map: map,
        icon: canvas.toDataURL("image/png")
    });
}

因此，我希望将
canvas
元素传递到这个函数中（已经设置了它的上下文），并将它设置为与标记
图标
等价的PNG

编辑：

我现在意识到，除了设置属性（即
fillStyle
），我还调用了contexts方法（即
beginPath（）
）。
我认为这将使我的尝试更加难以完成
，即使它看起来不存在，但在您改变画布元素的上下文后，它将被保留：

const canvas1 = document.getElementById('myCanvas');
const ctx = canvas1.getContext('2d');

ctx.font = '15px Calibri';

const canvas2 = document.getElementById('myCanvas');
console.log(canvas2.getContext('2d').font); // -> "15px Calibri"

因此，在您的情况下，在您将对canvas元素的引用传递到
addMarkerToMap
函数之后，在将来的任何时候依赖上下文都是安全的。
根据答案和规范，您可能无法用另一个替换canvas上下文，因为“每个canvas都有所谓的主上下文”

如果可能，您可以通过编程方式创建画布，然后将其作为子对象附加到HTML中（或者甚至在某些情况下克隆并替换旧画布，如果没有太多替换的话）

例如，您可以使用jQuery执行以下操作：

// Just a new canvas, you could even clone the old one
var canvas1 = $('<canvas/>', {
  id: 'canvas1',
  height: 500,
  width: 200,
  font: '15 px'
});
document.body.appendChild(canvas1);

//只是一个新画布，你甚至可以克隆旧画布
var canvas1=$（''{
id:“canvas1”，
身高：500，
宽度：200，
字体：“15像素”
});
文件.body.appendChild（canvas1）；
我不明白为什么这需要“设置”上下文对象您是否希望能够批量写入所有属性，如
font
、
fillStyle
，等等？@qxz否。我希望将所有属性批量写入一个对象是的。但是，由于我依赖于
服务
来设置上下文，因此变得更加困难。例如，我试图将canvas元素传递到服务中，然后设置它的上下文，但是因为服务没有使用模板映射，所以它没有实现上下文的设置。我喜欢这个想法，将对它进行测试，并让您知道我现在意识到了一个问题。我正在绘制形状（因此使用
beginPath（）
等），但我不认为它会起作用，因为它们是上下文中的方法，而不仅仅是属性。是什么阻止您以编程方式将这些方法调用到jQuery画布，然后将新画布附加到HTML中？
// Just a new canvas, you could even clone the old one
var canvas1 = $('<canvas/>', {
  id: 'canvas1',
  height: 500,
  width: 200,
  font: '15 px'
});
document.body.appendChild(canvas1);