Question

我正在创建一个应用程序，因此当用户单击“保存”时，从画布制作的绘图将被编译为图像。这在iPod Touch上完美运行：

http://i.stack.imgur.com/du4iC.png

但是，当我在笔记本电脑上试用时，会发生这种情况：

http://i.stack.imgur.com/39dWC.png

我已经尝试将高度设为“自动”和“100％”，但我似乎仍然无法使其正常工作。这是一个实例：
http：// v1k.me / paint /

请帮助我，我急于部署我的应用程序，谢谢！

这是我的代码：

<style
type="text/css">body{margin:5px;padding:0}
    canvas{border:1px
    solid
    #999;-webkit-touch-callout:none;-webkit-user-select:none;height:
    auto;width:
    auto;}
    a{background-color:#CCC;border:1px
    solid
    #999;color:#333;display:block;height:40px;line-height:40px;text-align:center;text-decoration:none}</style>
    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script
        type="text/javascript">jQuery(window).load(function(){setTimeout(function(){window.scrollTo(0,0)},50)});jQuery(function(e){var
            d=e("canvas"),h=e("form").find("input[
            name='u']"),j=e("a"),f=d[0].getContext("2d"),b=null,c=/iPhone/i.test(navigator.userAgent),g=function(a,c){var
            b=d.offset();return{x:a-b.left,y:c-b.top}},k=function(a){a=c?window.event.targetTouches[0]:a;a=g(a.pageX,a.pageY);b={x:a.x,y:a.y};f.lineTo(b.x,b.y);f.stroke()},l=function(){d.unbind(c?"touchmove":"mousemove");d.unbind(c?"touchend":"mouseup")};j.click(function(a){a.preventDefault();h.val(d[0].toDataURL("image/png"));a=document.getElementById("imgdata").value;document.getElementById("page").innerHTML="
            <center><em><b>Saving...</b> Please wait.</em>
            </center>";e.post("export.php",{u:a},function(a){document.getElementById("page").innerHTML=a})});d.bind(c?"touchstart":"mousedown",function(a){a=c?window.event.targetTouches[0]:a;a=g(a.pageX,a.pageY);b={x:a.x,y:a.y};f.beginPath();f.moveTo(b.x,b.y);d.bind(c?"touchmove":"mousemove",k);d.bind(c?"touchend":"mouseup",l);return!1})});</script>
            <body>
                <div
                id="page"
                align="center">
                    <canvas
                    id="canvas"
                    width="308"
                    height="358"></canvas>
                        <form
                        action="export.php"
                        method="post">
                            <input
                            type="hidden"
                            name="u"
                            id="imgdata"
                            value=""
                            /><a>Save Image</a>
                            </form>
</div>

这是一个JSFiddle： jsfiddle.net/CPPpY/1 /

Answer 1

尝试在代码中使用它来初始化canvas对象。

var canvas = document.getElementById("canvas");
canvas.width = document.body.clientWidth; //document.width is obsolete
canvas.height = document.body.clientHeight; //document.height is obsolete

以下是您的应用的重拍，其中包含100％宽度和高度的更改：）

http://jsfiddle.net/h4CCy/22/

除了语法错误之外，它们的关键变化在第34和35行。

为什么我的画布大小不是PC上的全屏？

1 个答案: