Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>CANVAS - Radialni Gradient</title>
<script>
var can, ctx;

function init() {
 can = document.getElementById('kan1');
 if (can.getContext) {
  ctx = can.getContext('2d');
 
  //draw functions
  circGrad();
 }
 else document.getElementById('kan11').innerHTML='Vaš browser ne podržava CANVAS tag!';
}

function circGrad() {
 ctx.beginPath();
 var grd=ctx.createRadialGradient(149.100, 164.100, 0.000, 200.100, 234.900, 150.000);
      grd.addColorStop(0.000, 'rgba(255, 242, 0, 1.000)');
      grd.addColorStop(0.370, 'rgba(255, 157, 0, 1.000)');
      grd.addColorStop(1.000, 'rgba(47, 32, 163, 1.000)');
 ctx.arc(150,100,80, 0,2*Math.PI, false);
 ctx.fillStyle = grd;
 ctx.fillRect(0,0, 300.000, 300.000);
}

window.onload=init;
</script>
</head>
<body>
 
Radijalni gradijent - sunce.<br>

<canvas id="kan1" width="300" height="300" style="border:1px solid #DDDDDD;">
 <span id="kan11">Vaš browser ne podržava CANVAS element!</span>
</canvas>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/43radial_gradient_sunce.html.