javascript - 通过对象设置 HTML Canvas 上下文

Question

到目前为止，我已经按照教程中的方式设置 HTML Canvas 上下文 shown ， 喜欢:

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

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

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

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


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

canvas.setContext(context);

这样做的原因是我正在创建一个 Angular 自定义 Canvas 。例如，我的 controller将获得 <canvas>元素。 service 中的一个方法将回调要为 Canvas 设置的上下文对象。

自定义 Canvas 将转换为 PNG 并设置为 icon用于谷歌地图上的标记。标记被添加到 service 中的 map 中。 :

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

所以我希望通过 canvas元素到这个函数中(已经设置了它的上下文)，只需将它的PNG设置为标记 icon .

编辑:

我现在意识到，除了设置属性(即 fillStyle )之外，我正在调用上下文方法(即 beginPath() )。我认为这将使完成我正在尝试的事情变得更加困难

Answer 1

即使它看起来像废话，在你改变了 Canvas 元素的上下文之后，它也会被保留:

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 之后，在将来的任何时候都可以安全地依赖上下文。功能。