HTML5 Game - Use gradient to create ball

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Radial Gradient

Description

Use gradient to create ball

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {//from w  w  w  .j a v  a2  s.c  o m
            background: #dddddd;
         }

         #canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 20px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='500' height='500'>
      Canvas not supported
    </canvas>

    <script>
let context = document.querySelector('#canvas').getContext('2d');

      let context = canvas.getContext('2d'); 
let radGrad = context.createRadialGradient( 
  260,320,40,200,400,200 
); 
radGrad.addColorStop(0.0,'yellow'); 
radGrad.addColorStop(0.9,'orange'); 
radGrad.addColorStop(1.0,'rgba(0,0,0,0)'); 
context.fillStyle = radGrad; 
context.fillRect(0,200,400,400); 
       </script> 

      </script>
  </body>
</html>

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
<body>
<canvas id="canvas" width="700" height="500"></canvas>
<script>
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d'); 

gradient = context.createLinearGradient(0,0,0,500);
gradient.addColorStop(0,'#ffffff');
gradient.addColorStop(1,'#0000ff');
context.fillStyle = gradient;//from ww w .j a  va 2  s .  c o  m
context.fillRect(0,0,700,500);

gradient1 = context.createRadialGradient(350,250,5,350,250,50);
gradient1.addColorStop(0,'#ffffff');
gradient1.addColorStop(1,'#ff0000');
context.fillStyle = gradient1;
context.arc(350,250,50,0,2*Math.PI,true);
context.fill();

//context.clearRect(100,100,50,100);
//context.clearRect(0,0,canvas.width,canvas.height);  
  </script>
</body>
</html>

Related Topic