設置HTML畫布背景

到現在爲止，我已經設置HTML畫布上下文的方式在教程是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，並設置爲icon作爲Google地圖上的標記。標記被添加到地圖中service：

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

所以我希望能在canvas元素傳遞到這個溫控功能（與它的背景下已經設置），只是設置它的PNG相當於作爲標記icon 。

編輯：

我現在已經意識到，其他的則只是設置屬性（即fillStyle），我調用上下文方法（即beginPath()）。
我認爲這將使它更難完成我想做

來源

2016-11-24 wmash

我不明白爲什麼這需要「設置」上下文對象 – qxz

你只是希望能夠做批量寫入所有的屬性，如'font'，'fillStyle'等？ – qxz

@qxz no。我想將所有屬性批量寫入一個對象中。但是，因爲我依賴'service'來設置上下文，所以它變得更加困難。例如，我試圖將canvas元素傳遞到服務中，然後設置它的上下文，但由於服務沒有與模板映射，所以沒有實現上下文設置 – wmash

即使它看起來像無義，你變異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"

所以，您的情況下，在將參考畫布元素傳遞給addMarkerToMap函數後，在將來的任何時候依靠上下文是安全的。

來源

2016-11-24 01:18:57

根據this的答案 - 以及規範，因爲它說，你可能不能用另一個替換畫布上下文，因爲「每個畫布都有所謂的主要上下文」。如果可能的話，你可以通過編程方式創建一個畫布，然後將它作爲一個孩子附加到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);

來源

2016-11-24 01:26:53

我喜歡這個想法，會測試它並且讓你知道 – wmash

我現在已經意識到了一個問題。我正在繪製形狀（所以使用'beginPath（）'等等），不要認爲它會起作用，因爲它們是上下文中的方法而不僅僅是屬性 – wmash

是什麼阻止你以編程方式將這些方法調用到由jQuery畫布創建，然後將新畫布添加到HTML中？ –

設置HTML畫布背景

回答

相關問題