HTML5、Canvas 和 FireFox
我对下面所示的 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>
I have a couple questions about the HTML5-Canvas code shown below.
- The text does not appear in Firefox 3.6 (it does appear in Chrome.)
- Regarding the ctx variable (ctx = c.getContext("2d")), should this variable be reused over and over to create additional rectangles, shapes, etc. on the same canvas, or is it desirable to make new context variables for new rectangles, lines, etc.? (It seems to work both ways, but I'm not clear what is standard practice.)
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题似乎出在您对 textBaseline 的调用上。
在 JSFiddle 中使用它时，似乎这是区分大小写的...尝试将其设置为小写：
ctx.textBaseline = 'top'为您保存了小提琴链接：http://jsfiddle.net/NG8Yf/
The problem seems to be with your call to textBaseline.
In playing with it in JSFiddle, it seems that this is case-sensitive...try making it lower-case:
ctx.textBaseline = 'top'Saved the fiddle link for you: http://jsfiddle.net/NG8Yf/