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.
Page 2 of 2 FirstFirst 12
Results 16 to 18 of 18
  1. #16
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,118
    Thanks
    1
    Thanked 530 Times in 516 Posts

    Quote Originally Posted by Ezybusy View Post
    "But if you want the user to define the radius, then scripting is required."
    I assume that your teacher is aware of that also.

    coothead
    ~ the original bald headed old fart ~

  2. #17
    New to the CF scene
    Join Date
    Nov 2017
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @coothead

    Can you help me understand each section of the code you provided. Especially the JavaScript section.

    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Canvas circle creation</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
        font: 1em/150% verdana, arial, helvetica, sans-serif;
        text-align: center;
     }
    
    #canvas {
        margin: 1em auto;
        border: 0.062em solid #999;
        background-color: #fff;
        box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
     }
    
    .hide {
        display: none;
     }
    
    .show {
        display: block;
     }
    </style>
    
    </head>
    <body> 
    
     <h1>Javascript is required for this project</h1>
    
    <script>
    (function( d ) {
       'use strict';
    
       d.getElementsByTagName( 'h1' )[0].textContent = 'Canvas circle creation';
    
       var lab = d.createElement( 'label' );
           lab.setAttribute( 'for', 'radius' );
           lab.appendChild( d.createTextNode( 'Select cicle radius  value: ' ) );
           d.body.appendChild( lab ); 
    
       var inp = d.createElement( 'input' );
           inp.setAttribute( 'id', 'radius' );
           inp.setAttribute( 'type', 'number' );
           inp.setAttribute( 'min', 2 );
           inp.setAttribute( 'max', 400 );
           inp.setAttribute( 'step', 2 );
           d.body.appendChild( inp ); 
    
       var can = d.createElement( 'canvas' );
           can.setAttribute( 'id', 'canvas' );
           can.setAttribute( 'class', 'hide' );
           d.body.appendChild( can );   
           
           inp.addEventListener( 'input', 
              function(){
    
                     canvas.classList.remove( 'hide' );
                     canvas.classList.add( 'show' );
    
                     can.setAttribute( 'width', inp.value * 2 + 30 );
                     can.setAttribute( 'height', inp.value * 2 + 30 );
    
                 var centerX = can.width / 2;
                 var centerY = can.height / 2; 
    
                 var ctx = canvas.getContext( '2d' );
                     ctx.beginPath();
                     ctx.arc( centerX, centerY, inp.value, 0, 2 * Math.PI, false );
                     ctx.fillStyle = '#f00';
                     ctx.fill();
                     ctx.lineWidth = 4;
                     ctx.strokeStyle = '#000';
                     ctx.stroke();
                 
                },false );
    }( document ));
    </script>
    
    </body>
    </html>
    Last edited by VIPStephan; 11-16-2017 at 05:01 PM. Reason: added code BB tags

  3. #18
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,118
    Thanks
    1
    Thanked 530 Times in 516 Posts
    Hi there Ezybusy,


    does this help...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Canvas circle creation</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
        font: 1em/150% verdana, arial, helvetica, sans-serif;
        text-align: center;
     }
    
    #canvas {
        margin: 1em auto;
        border: 0.062em solid #999;
        background-color: #fff;
        box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
     }
    
    .hide {
        display: none;  
     }
    
    .show {
        display: block;  
     }
    </style>
    
    </head>
    <body> 
    
     <h1>Javascript is required for this project</h1><!-- display this text if javascript is disabled -->
    
    <script>
    (function( d ) {
       'use strict';
    
       d.getElementsByTagName( 'h1' )[0].textContent = 'Canvas circle creation'; /* display this text if javascript is enabled  */
    
       var lab = d.createElement( 'label' ); /* create a label element */
           lab.setAttribute( 'for', 'radius' ); /* give the label element a for="radius" attribute */
           lab.appendChild( d.createTextNode( 'Select cicle radius  value: ' ) ); /* create the text for the label element */
           d.body.appendChild( lab ); /* add the label element to the body element */
    
       var inp = d.createElement( 'input' ); /* create an input element */
           inp.setAttribute( 'id', 'radius' );  /* give the input element a id="radius" attribute */
           inp.setAttribute( 'type', 'number' );  /* give the input element a type="number" attribute */
           inp.setAttribute( 'min', 2 );  /* give the input element a min="2" attribute */
           inp.setAttribute( 'max', 400 ); /* give the input element a max="400" attribute */
           inp.setAttribute( 'step', 2 ); /* give the input element a step="2" attribute */
           d.body.appendChild( inp ); /* add the input element to the body element */
    
       var can = d.createElement( 'canvas' ); /* create an canvas element */
           can.setAttribute( 'id', 'canvas' );  /* give the canvas element a id="canvas" attribute */
           can.setAttribute( 'class', 'hide' );  /* give the canvas element a class="hide" attribute */
           d.body.appendChild( can ); /* add the canvas element to the body element */   
           
           inp.addEventListener( 'input', /* add the 'oninput event handler' to the input element */ 
              function(){
    
                     canvas.classList.remove( 'hide' ); /* removes CSS "display: none" from the canvas element */
                     canvas.classList.add( 'show' ); /* add CSS "display: block" to the canvas element */
    
                     can.setAttribute( 'width', inp.value * 2 + 30 ); /* sets the canvas element's width attribute based on the input element's current value */
                     can.setAttribute( 'height', inp.value * 2 + 30 ); /* sets the canvas element's height attribute based on the input element's current value */
    
                 var centerX = can.width / 2; /* sets circle's "x" position according to canvas element's current width value */
                 var centerY = can.height / 2; /* sets circle's "y" position according to canvas element's current height value */
    
                 var ctx = canvas.getContext( '2d' ); /* this sets the canvas to render in two dimentional mode */
                     ctx.beginPath(); /* sinifies the start of the drawing */
                     ctx.arc( centerX, centerY, inp.value, 0, 2 * Math.PI, false ); /* draws a circle according to the input element's current value */
                     ctx.fillStyle = '#f00'; /* sets the circle's background colour */
                     ctx.fill();    /* applies the circle's background colour */
                     ctx.lineWidth = 4; /* sets the circle's border width */
                     ctx.strokeStyle = '#000'; /* sets the circle's border colour */
                     ctx.stroke();  /* applies the circle's border */
                 
                },false );
    }( document ));
    </script>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~


 
Page 2 of 2 FirstFirst 12

Tags for this Thread

Posting Permissions

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