7

divがあり、そのdiv内に、テキストボックス、ドロップドウチェックボックス、ラジオボタンなどのフォームコントロールがほとんどないとします。ユーザーが特定のボタンをクリックすると、divのコンテンツがキャンバスに描画されるようにします。いくつかのサンプルコードまたは例があるかどうかグーグルで検索しましたが、見つかりませんでした。コントロールがスタイルシートで表示されるので、jqueryを使用してhtml5キャンバスにDIVのコンテンツを描画する方法を教えてください。

質問が更新されました

<div class="login">
<form method="post" action="www.mysite.com">
    <fieldset>
        <div class="login-fields"><label class="" for="username" id="username-lbl">User Name</label>                    
        <input type="text" size="25" class="validate-username" value="" id="username" name="username"></div>
        <div class="login-fields"><label class="" for="password" id="password-lbl">Password</label>                 
        <input type="password" size="25" class="validate-password" value="" id="password" name="password"></div>
        <button class="button" type="submit">Log in</button>
    </fieldset>
</form>
</div>

上記のようなフォームがあり、jqueryを使用してプログラムでキャンバスに描画する必要があり、フォームのルックアンドフィールは同じになります。

アップデート

var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
    onrendered: function (domElementCanvas) {
        var canvas = document.createElement('canvas');
        canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);

        // do something with canvas
    }
}
4

2 に答える 2

13

chromeの解決策があります：https：//developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawWindow（）

しかし、必要なのはxml+svgを使用することだと思います。ここに例があります：http：//jsfiddle.net/3N69j/

コード：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
           "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px'>" +
                "<ul> <li style='color:red'> hello </li>  <li style='color:green'>thomas</li> </ul> "  +   
               "</div>" +
             "</foreignObject>" +
           "</svg>";

var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }

jqueryを使用してHTMLコードを簡単に取得できます（クリックして、$（this）.html（）を使用し、svgデータをフィードします

幸運を

于 2012-06-07T17:17:50.527 に答える
7

HTML-2-Canvasをチェックしてください。私はそれがかなりうまく機能するようになりました。Android携帯でも動作するようです。

于 2012-06-07T17:21:35.953 に答える