Editor

Pregled code-a:

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

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

function drawTriangle() {
 //styles
 ctx.lineWidth = 8;
 ctx.strokeStyle = '#00FF00';
 ctx.fillStyle = 'rgba(255,0,0, 0.7)'; //neprozirnost 0.7
 
 //stroke
 ctx.moveTo(20,20);
 ctx.lineTo(150,20);
 ctx.lineTo(150,150);
 ctx.closePath();
 ctx.stroke();
 
 //fill
 ctx.fill();
}

window.onload=init;
</script>
</head>
<body>
 
Prozirnost definirana sa <b>rgba(255,0,0, 0.7)</b>.<br>

<canvas id="kan1" width="283" height="176" style="border:1px solid #DDDDDD;background-image:url('../slike/landscape.jpe');">
 <span id="kan11">Vaš browser ne podržava CANVAS element!</span>
</canvas>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/41prozirnost.html.