android - IBM Worklight - 使用 Canvas

Question

我想将画布添加到我的 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>

score 0 · Accepted Answer

我没有尝试使用 jQuery Mobile（正如您的代码片段所暗示的那样......），但是在 Worklight Console 中预览时，以下内容对我有用：

添加到 common\js 一个新canvas.js的包含来自这里的代码：http: //pastebin.com/cd5wxJun

添加到 .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>

添加到 .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>

全部构建并部署
在 Worklight Console 中预览

android - IBM Worklight - 使用 Canvas

1 回答 1

Related

Reference