Editor

Pregled code-a:

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

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

function propShadow() {
  ctx.shadowOffsetX = 8;
  ctx.shadowOffsetY = 5;
  ctx.shadowBlur = 13;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
}

function propGrad() {
 grad=ctx.createRadialGradient(110,70,0, 150,100,100);
 grad.addColorStop(0, "white");
 grad.addColorStop(1, "green");
}

function drawCirc(grad) {
 ctx.beginPath();
 ctx.arc(150,100,80, 0, 2*Math.PI, false);
 ctx.fillStyle = grad;
 ctx.fill();
}

window.onload=init;
</script>
</head>
<body>
 
Kugla sa sjenom.<br>

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

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/45shadow_kugla.html.