Question

到目前为止，我已经在教程shown中设置了HTML画布上下文，如：

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

ctx.font = "15px calibri";
...

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

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


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

canvas.setContext(context);

原因是我正在以角度创建自定义画布。例如，我的controller将获得<canvas>元素。 service中的方法将回调上下文对象以设置画布。

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

中的地图中

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

所以我希望将canvas元素传递给这个函数（已经设置了它的上下文）并将它的PNG等效设置为标记icon。 / p>

修改

我现在已经意识到，除了设置属性（即fillStyle）之外，我正在调用上下文方法（即beginPath()）。我认为这会使它更多更难完成我正在尝试的事情

Answer 1

即使它看起来像nonsence，在改变canvas元素的上下文之后，它仍会被保留：

addMarkerToMap

因此，在您的情况下，在将canvas元素的引用传递给{{1}}函数之后，将来随时依赖上下文是安全的。

Answer 2

基于this回答 - 以及它所说的规范，你可能无法用另一个替换画布上下文，因为＆＃34;每个画布都有所谓的主要上下文＆＃34;。

如果可能，您可以通过编程方式创建画布，然后将其作为子项附加到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);

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

2 个答案: