Question

我有几个关于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>

Answer 1

问题似乎在于你对textBaseline的调用在JSFiddle中使用它时，似乎这是区分大小写的...尝试将其设为小写：ctx.textBaseline = 'top'

为您保存了小提琴链接：http://jsfiddle.net/NG8Yf/

HTML5，Canvas和FireFox

1 个答案: