Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile HTML5 Drawing app with Animation help

    I'm currently studying HTML5 and I'm thinking of making a drawing app that allows you to draw and then animate it at the same time, like an animator's drawing board or a flip book. Is it possible? Can you save it with PHP?


    I'm aware that flash can be also of use but I heard its too big.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,929
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Here's a little drawing app I wrote, wasn't too happy that I didn't make it work in 'real time' but I got pretty close.
    PHP Code:
    <?php
    if (!isset($mystyle)) $mystyle = array('#ffffff','White','Aqua',3,"#ddf0ff","Red");
    if (isset(
    $_POST['sendData'])){
    $mystyle $_POST['sendData'];
    $stack $_POST['theStack'];

    }
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"></meta>
    <title>Top Drawer</title>
    <script type="text/javascript">
    //Alerts to errors.
    window.onerror=function(msg, url, linenumber){var logerror='Error message: ' + msg + '. Url: ' + url + 'Line Number: ' + linenumber;alert(logerror);return false}
    </script>
    <style type='text/css'>
    body
    {
    background-color: Blue;
    color: White;
    margin: 0 auto;
    }
    #forbuttons {padding-left: 100px;}
    #forform
    {
    margin: 0;
    padding: 20px;
    width: 640px;
    font-size: 24px;
    }
    a
    {
    color: White;
    text-decoration: none;
    }
    fieldset 
    {
    border-radius: 10px;
    top: 640px;
    position: absolute;
    }
    button, select {color: Black;margin: 8px 0 0 0 ;}
    embed
    {
    left: 0; top: 0;
    position: relative;
    }
    #thecolors
    {
    color: #333333;
    height: 40px;
    width: 200px;
    border: 2px solid white;
    text-align: center;
    }
    #wrapper
    {
    width: 1000px;
    height: 600ppx;
    top: 20px;
    left: 20px;
    position: relative;
    }
    svg
    {
    left: 0;top: 0;
    position: absolute;
    }
    #mycover 
    {
    left: 0;top: 0;
    position: absolute;
    opacity: 0.5;
    z-index:10;font-size: 32px;
    color: Black;
    font-family: Helvetica;
    padding: 0;border: 0;
    width: 1000px;
    height: 600px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="mycover" title="" onmousedown="startWriting(event);" onmousemove="amWriting(event);" onmouseup="return stopWriting(event);">&nbsp;Just write on me</div>
    <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="1000" height="600"
    style="background: #eecc99;">

    <?php if(isset($stack)) echo $stack?></svg>
    </div>
    <div id="forform">
    <fieldset>
    <form method="post" id="myaction" action="./index.php">

    <select id="mycolors"  class="senddata" name="sendData[]" onchange="showColors();" >
    <option value="#00ffff" >Aqua</option>
    <option value="#0000ff" >Blue</option>
    <option value="#000000" >Black</option>
    <option value="#" >Brown</option>
    <option value="#" ></option>
    <option value="#" ></option>
    <option value="#009900" >Green</option>
    <option value="#ff00ff" >Magenta&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
    <option value="#ff6600" >Orange</option>
    <option value="#" ></option>
    <option value="#999999" >Silver</option>
    <option value="#ffff00" >Yellow</option>
    <option value="#ffffff" >White</option>
    <option value="#" ></option>
    </select>&nbsp;&nbsp;Color chooser<br>
    <input type="hidden" id="thestack" value="" name="theStack">
    <br><button type="submit" >Build your graph</button>
    <br><button  onclick="doClear();">Clear all</button>


    </form>

    <br><button  onclick="clearLast();">Clear last</button>
    <button  onclick="doPreview();">Preview</button>
    </fieldset>
    <p id="thecolors"></p>
    <a href="./download.php?thefile=mynewgraph">&nbsp;&nbsp;Download your message.</a><br>
    <a href="../index.php">&nbsp;&nbsp;Home page.</a><br>
    <a href="./index.php">&nbsp;&nbsp;Reload this page.</a><br>
    </div>
    <script type="text/javascript">
    var thedata  = window.document.getElementsByClassName("senddata");
    var tx  = window.document.getElementsByClassName("txts");
    var stk = window.document.getElementById("thestack");
    var wra = window.document.getElementById("wrapper");
    var myact = window.document.getElementById("myaction");
    var vg = window.document.getElementById("mysvg");
    function showColors(){
    var clrs = window.document.getElementById("mycolors").value;
    var theclrs = window.document.getElementById("thecolors");
    theclrs.innerHTML = clrs;
    theclrs.style.backgroundColor = clrs;}
    showColors();
    flag = 0;
    var pts = [];
    function doBuild(){ stk.value = vg.innerHTML; }
    function doClear(){ vg.innerHTML = ""; }
    function clearLast(){ vg.removeChild(vg.childNodes[vg.childNodes.length-1]); }
    function doPreview(){ P = vg.innerHTML; vg.innerHTML = P; }
    function startWriting(e)
        {
        if (flag==0 && e.clientY != null||e.clientX != null)
        {
        pts=[(e.clientX-20+vg.scrollLeft)];
        flag = 1;
        }}
    function amWriting(e)
        {
        if (flag==1 && e.clientY != null||e.clientX != null)
        {
        pts.push((e.clientY-20+vg.scrollTop)+' '+(e.clientX-20+vg.scrollLeft));
        }}
    function stopWriting(e)
        {
        pts.push(e.clientY-20+vg.scrollTop);
        poly=new Object();
        poly = document.createElement("polyline");
        vg.appendChild(poly);
        poly.setAttribute("class","txts");
        poly.setAttribute("points",pts);
        poly.setAttribute("fill","yellow");
        poly.setAttribute("stroke","red");
        poly.setAttribute("stroke-width",3);
        stk.value = vg.innerHTML;
        flag = 0;
        myact.submit();
        }
    </script>
    <pre>
    <?php
    //print_r($_SESSION);
    ?>
    </pre><br>
    </body>
    </html>
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i got a
    Not Found

    The requested URL /New folder/index.php was not found on this server.
    when i clicked something on the page

    I'm now at the basics of HTML5 canvas and i was surprised that you can actually save your drawing.(sorry if i sounded kinda new)
    But what I'm aiming is that you can draw then click a button to go to the next frame and draw, then a button that let's you play them all out or animate it like a flip book.

    sorta like this


    or this


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •