通過對象設置HTML畫布上下文

Question

到現在為止，我已經在教程設置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等效設置為Marker icon 。

編輯：

我現在意識到除了設置屬性（即fillStyle ）之外，我正在調用contexts方法（即beginPath() ）。
我認為這將使我更難實現我的目標

Answer 1

即使它看起來像nonsence，在改變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函數之后，將來隨時依賴上下文是安全的。

Answer 2

根據這個答案 - 以及它所說的規范，你可能無法用另一個替換畫布上下文，因為“每個畫布都有所謂的主要上下文”。

如果可能，您可以以編程方式創建畫布，然后將其作為子項附加到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);