[英]HTML5 canvas issue?
这是我的JS代码:
function Show(output, startX, startY){
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillText ("A" , startX, startY);
context.font = 'bold 20px sans-serif';
context.fillText ("B" , startX, startY + 50);
}
Show(outputcpu, 50, 50);
Show(outputio, 150, 50);
我期望的是这样的事情:
AA
B B
但我不确定为什么会得到:
A A
B B
我认为由于context.font导致的问题一直持续到下一个函数调用为止。 但是我不知道如何阻止它! 任何想法!?
绘制之前,您需要重置字体-尝试:
function Show(output, startX, startY){
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.font = ' 20px sans-serif';
context.fillText ("A" , startX, startY);
context.font = 'bold 20px sans-serif';
context.fillText ("B" , startX, startY + 50);
}
Show(outputcpu, 50, 50);
Show(outputio, 150, 50);
这是一个小提琴-http: //jsfiddle.net/8Tuzp/
编辑:
如果您真的不喜欢两次更改字体(我认为这样做没有问题),则可以在绘制粗体后保存画布状态并恢复它。 将画布上下文还原到更改字体之前。
function Show(output, startX, startY){
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.save();
context.fillText ("A" , startX, startY);
context.font = 'bold 20px sans-serif';
context.fillText ("B" , startX, startY + 50);
context.restore();
}
Show(null, 50, 50);
Show(null, 150, 50);
您需要将字体权重设置回正常,因为上下文属性在getContext()调用之间是持久的:
context.fillText ("A" , startX, startY);
context.font = 'bold 20px sans-serif';
context.fillText ("B" , startX, startY + 50);
context.font = '20px sans-serif';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.