设置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画布背景

回答

相关问题