iPhone/iPad HTML5 Canvas fillText problem_问答_开发者

iPhone/iPad HTML5 Canvas fillText problem

开发者 https://www.devze.com 2023-01-03 05:23 出处：网络

I\'m having strange issues with text on a canvas when using an iPhone or iPad. Either the text gets drawn properly (rarely), or it gets drawn upside down, or it doens\'t get drawn at all.

I'm having strange issues with text on a canvas when using an iPhone or iPad. Either the text gets drawn properly (rarely), or it gets drawn upside down, or it doens't get drawn at all. When the text does manage to get drawn, it is wiped when the iPhone/Pad is rotated.

I have the following code. It seems that I can only get the text to stay on the page at all if I use a setTimeout. It seem开发者_开发技巧s to be drawn over if I call fillText as soon as the document is loaded.

Anyone else experiencing this sort of problem?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //draw_b();
        setTimeout('draw_b()', 500); ;
    });

    function draw_b() {
        var b_canvas = document.getElementById("cv");
        var context = b_canvas.getContext("2d");
        context.fillText("Belated hello world", 50, 50);
    }
</script>
</head>
<body>
<canvas id="cv" width="300" height="225"></canvas>

</body>
</html>

I have the same problem , the earlier version(3.2) doesn't support HTML5 Canvas filltext, You can use alternative API such stroketext to fix this issue: http://www.netzgesta.de/dev/text/#canvas_api