我对下面所示的 HTML5-Canvas 代码有几个问题。
- 该文本不会出现在 Firefox 3.6 中（它会出现在 Chrome 中。）
- 关于 ctx 变量 (ctx = c.getContext("2d"))，是否应该反复重用该变量以在同一画布上创建其他矩形、形状等，或者是否需要为新的创建新的上下文变量矩形、直线等？ （这似乎是双向的，但我不清楚什么是标准做法。）
<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="myCanvas" width="400" height="350">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle="black";
ctx.strokeRect(10,10,180,75);
ctx.textBaseline = 'Top';
ctx.font = '20px Sans-Serif';
ctx.fillStyle = 'blue';
ctx.fillText ("hello", 30, 50);
</script>
</body>
</html>
问题似乎出在您对 textBaseline 的调用上。
在 JSFiddle 中使用它时，似乎这是区分大小写的......尝试将其设置为小写：ctx.textBaseline = 'top'
为您保存了小提琴链接：http://jsfiddle.net/NG8Yf/ http://jsfiddle.net/NG8Yf/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
