HTML5 Game - Compare Linear gradient and radical gradient

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

Description

Compare Linear gradient and radical gradient

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 w w  w .  ja  v a  2s  .  c  om*/
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