Editor

Pregled code-a:

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

function init() {
 can = document.getElementById('kan1');
 if (can.getContext) {
  ctx = can.getContext('2d');
  
  //global styles
 ctx.lineWidth = 13;
 ctx.strokeStyle = 'green';
 ctx.fillStyle = 'red';
 ctx.globalAlpha = 0.7;
 
  //draw triangle
  ctx.beginPath();
  triangle();
  ctx.stroke();
  ctx.fill();
  
  //draw circle
  ctx.beginPath();
  ctx.globalAlpha = 0.2;
  circle();
  ctx.stroke();
  ctx.fill();
 }
 else document.getElementById('kan11').innerHTML='Vaš browser ne podržava CANVAS tag!';
}

function triangle() {
 ctx.moveTo(20,20);
 ctx.lineTo(150,20);
 ctx.lineTo(150,150);
 ctx.lineTo(20,20);
}

function circle() {
 ctx.moveTo(200,150);
 ctx.arc(150, 150, 50, 0, 2*Math.PI);
}

window.onload=init;
</script>
</head>
<body>
 
Krug ima <b>globalAlpha=0.2</b> dok trokut ima  <b>globalAlpha=0.7</b>.
Zato je krug prozirniji od trokuta.<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/42globalAlpha2.html.