这是我的 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);
我期望的是这样的:
一个一个
B B
但我不确定为什么我得到的是:
一个一个
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);
这是一个 fiddle - http://jsfiddle.net/8Tuzp/
编辑:
如果您确实不喜欢两次更改字体(我认为这样做没有问题),您可以保存 Canvas 状态并在绘制粗体文本后恢复它。将 Canvas 上下文恢复到更改字体之前。
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);
关于javascript - HTML5 Canvas 问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7517582/