HTML5 Canvas Circle with three different colors - Javascript Canvas

Javascript examples for Canvas:Circle

  1. HOME
  2. Javascript
  3. Canvas
  4. Circle

Description

HTML5 Canvas Circle with three different colors

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <style>

#test {/*from ww  w.  java  2  s  .  c o m*/
   width:100px;
   height:100px;
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#00FF00',GradientType=0 );
}

      </style> 
   </head> 
   <body> 
      <canvas id="myCanvas"> 
         <div id="test"></div> 
      </canvas> 
      <script src="http://malsup.github.io/jquery.corner.js"></script> 
      <script>
$('#test').corner('50px');
if (isCanvasSupported()) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
var grd=context.createLinearGradient(0,0,0,100);
grd.addColorStop(0,"red");
grd.addColorStop(0.7,"orange");
grd.addColorStop(1,"green");
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = grd;
context.fill();
}
function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

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

Related Tutorials