IBM Worklight - Using Canvas

问题

I want to add canvas to my Worklight project.
I learned how to create canvas from this tutorial: http://dev.opera.com/articles/view/html5-canvas-painting/

I tried to add the markup and JavaScript to my project, it didn't show error, but when I build and run to my device, it says:

Can't Find Canvas Element

This the code that i add to my project.

   <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>

回答1:

I didn't try with jQuery Mobile (as your code snippet implies...), but the following worked for me while previewing in Worklight Console:

Added to common\js a new canvas.js containing the code from here: http://pastebin.com/cd5wxJun

Added to the HEAD element in the .html file:

<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>

Added to the body element in the .html file:

<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>

Build All and Deploy
Preview in Worklight Console

来源：https://stackoverflow.com/questions/17991653/ibm-worklight-using-canvas

标签

android

canvas

ibm-mobilefirst