SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using canvas and onforminput

    I have used the HTML5 canvas element to create a couple of patterns using circles: http://gandalf458.co.uk/canvas-circle.htm and http://gandalf458.co.uk/canvas-circle2.htm and they work fine. I then thought I would try to combine them and use onforminput so that I can select which pattern to display using radio buttons. I know this only works in Opera at the moment but my attempt http://gandalf458.co.uk/canvas-circle3.htm isn't working. Can anyone help me with whatever is missing please...

    Thanks G
    blessed are the cracked for they let in the light

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The following script sorts out your radio button problems, but it doesn't work in IE. Also, I am not familiar with the canvas app, so I was unable to clear the patterns between clicks on the radio buttons. You can reload the page to clear it, but I am sure there is a better way.

    <!doctype html>
    <html>

    <head>

    <meta charset="utf-8" />
    <title>Flowers of Life</title>
    <script type="text/javascript">
    <!--
    var myForm; // global
    function init(){ myForm=document.forms["form1"]; } // shortcut
    // ---------------------
    var thisPattern // global
    function getChecked()
    { for(var i=0;i<myForm.pattern.length;i++)
    { if(myForm.pattern[i].checked==true)
    { thisPattern=myForm.pattern[i].value; }
    }
    // write pattern to page
    formInput();
    }
    // ----------------------
    function formInput()
    {var ctx = document.querySelector('canvas').getContext('2d');
    // circle settings
    ctx.strokeStyle = '#339';
    ctx.lineWidth = 1;
    ctx.lineCap = 'round';
    ctx.save();
    var radius = 40;

    if (thisPattern == "circles")
    { // all circles
    var startx = 0;
    var starty = 0;
    var incrx = 2 * radius;
    var incry = Math.sqrt( 3*radius*radius );
    }
    else if (thisPattern == "flowers")
    { // flower of life
    var startx = 0;
    var starty = radius * .134;
    var incrx = radius;
    var incry = radius * .866;
    }
    //
    for (var y = starty; y <= ctx.canvas.height; y += incry)
    {if (thisPattern == "circles")
    { // all circles
    startx = radius - startx;
    }
    else if (thisPattern == "flowers")
    { // flower of life
    startx = radius/2 - startx;
    }
    //
    for (var x = startx; x <= ctx.canvas.width; x += incrx)
    {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.stroke();
    }
    }
    }
    //
    // -------
    var thisPattern // global
    function getChecked()
    { document.getElementsByTagName("canvas").innerHTML="aaaaa";
    for(var i=0;i<myForm.pattern.length;i++)
    { if(myForm.pattern[i].checked==true)
    { thisPattern=myForm.pattern[i].value; }
    }
    // write pattern to page
    formInput();
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font: .83em verdana, arial, helvetica, sans-serif; margin: 20px; }
    canvas { margin: 40px auto; display: block; border: 1px solid #ccc; }
    -->
    </style>
    </head>

    <body onload="init()">

    <form name="form1">
    <p>just circles
    <input name="pattern" type="radio" onclick="getChecked()" value="circles">&nbsp;&nbsp;
    flowers of life
    <input name="pattern" type="radio" onclick="getChecked()" value="flowers"> </p>
    </form>
    <canvas height="420" width="600"></canvas>

    </body>

    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Allan. That's a great help. IE doesn't yet understand most HTML5 elements. Seems a lot of HTML5 elements require JavaScript which is not my puppy!

    Cheers G
    blessed are the cracked for they let in the light


Bookmarks

Posting Permissions

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