0

Worklight プロジェクトにキャンバスを追加したいと考えています。
このチュートリアルからキャンバスを作成する方法を学びました: http://dev.opera.com/articles/view/html5-canvas-painting/

マークアップと JavaScript をプロジェクトに追加しようとしましたが、エラーは表示されませんでしたが、デバイスをビルドして実行すると、次のように表示されます。

キャンバス要素が見つかりません

これは私のプロジェクトに追加するコードです。

   <div data-role="page" id="thiscanvas">
            <div data-position="fixed" data-role="header" id="header">
                <h3>Drawing<br>On Canvas</h3>
            </div>

            <div data-role="content" style="padding: 15px; background: url(images/bgold.png) repeat-x center;max-height:100%;">
                <table>
                    <tbody>
                    <tr>
                        <td><p><label>Drawing tool</label></p></td>
                        <td><p><label>:</label></p></td>
                        <td><p><select id="dtool">
                            <option value="rect">Rectangle</option>
                            <option value="pencil">Pencil</option>
                            </select></p></td>
                    </tr>
                    <tr>
                        <td><p><label>Color tool</label></p></td>
                        <td><p><label>:</label></p></td>
                        <td><p><select id="ctool">
                        <option value="#000000">Black</option>
                        <option value="#0000ff">Blue</option>
                        <option value="#00ff00">Green</option>
                        <option value="#ff0000">Red</option>
                        </select></p></td>
                    </tr>
                    </tbody>
               </table>



                <p>Try to draw on canvas.</p>
                <div id="container" >
                  <canvas id="imageView" width="400" height="300" style="background: url(images/motif-batik-indonesia-solo.gif);">
                    Sorry your browser didn't support.
                    Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
                      href="http://www.mozilla.com">Firefox</a>, <a 
                      href="http://www.apple.com/safari">Safari</a>, and <a 
                      href="http://www.konqueror.org">Konqueror</a>.
                  </canvas>
                </div>


            </div>

            <div data-role="footer" class="footer-docs" data-theme="c">
                <p>Copyright 2013, Fastfoura</p>
            </div>
4

1 に答える 1

0

jQuery Mobile は試しませんでしたが (コード スニペットが示すように...)、Worklight Console でプレビューしている間、次のように動作しました。

  1. canvas.jsここからのコードを含む新しいものが common\js に追加されました: http://pastebin.com/cd5wxJun

  2. .html ファイルの HEAD 要素に追加:

    <script src="js/canvas.js"></script>
<style type="text/css">
    #container { position: relative; }
    #imageView { border: 1px solid #000; }
    #imageTemp { position: absolute; top: 1px; left: 1px; }
</style>

  3. .html ファイルの body 要素に追加:

    <p>
    <label>Drawing tool: 
        <select id="dtool">
        <option value="line">Line</option>
        <option value="rect">Rectangle</option>
        <option value="pencil">Pencil</option>
        </select>
    </label>
</p>

<div id="container">
    <canvas id="imageView" width="400" height="300">
    </canvas>
</div>

  4. すべてをビルドしてデプロイ

  5. Worklight Console でプレビュー
于 2013-08-01T15:16:40.317 に答える