HTML5 Game - Applying Gradients to Shapes

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

Description

Applying Gradients to Shapes

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { /*www.j  ava  2 s  .co  m*/
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  let canvas = document.getElementById('canvas').getContext('2d'); 
  let grd = canvas.createLinearGradient(0, 200, 200, 0); 
  grd.addColorStop(0, '#000'); 
  grd.addColorStop(.5, '#ccc'); 
  grd.addColorStop(1, '#000'); 
  canvas.fillStyle = grd; 
  canvas.strokeStyle = '#09c'; 
  canvas.lineWidth = 5; 
  canvas.fillRect(0, 0, 200, 200); 
  canvas.closePath(); 

  let grd = canvas.createRadialGradient(300, 250, 2, 200, 200, 250); 
  grd.addColorStop(0, '#000'); // light blue 
  grd.addColorStop(1, '#ccc'); // dark blue 
  canvas.fillStyle = grd; 
  canvas.fillRect(200, 200, 200, 200); 
  canvas.closePath(); 
</script> 
</body> 
</html>

Related Topic