Nugroho's blog.: Playing with Opacity on HTML5's canvas

Monday, December 3, 2012

Playing with Opacity on HTML5's canvas

What I do here is wrap whole canvas on this program with a rectangle with opacity 0.1. So the code (under script tag) become like this:

var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
var n=10;
var bBola=new Array();
function init(){
 canvas=myCanvas;
 context= myCanvas.getContext('2d');
 for (i=0;i &lt n;i++){
  dx = Math.random()*10-5;
  dy = Math.random()*10-5;
  bBola.push(new bola('#007700', 11,dx,dy));
 } 
 setInterval(draw,10);

}

function draw(){
   for (i=0;i &lt n;i++){
   if (bBola[i].x &gt = (canvas.width - bBola[i].r) || bBola[i].x &lt = bBola[i].r) bBola[i].dx *= -1;
  if (bBola[i].y &gt = (canvas.height - bBola[i].r) || bBola[i].y &lt = bBola[i].r) bBola[i].dy *= -1;

  //buat
  bBola[i].context.beginPath();
      bBola[i].context.fillStyle = bBola[i].color;
      bBola[i].context.arc(bBola[i].x,bBola[i].y,bBola[i].r,0,Math.PI*2,false);
  bBola[i].context.fill();
   
  //gerak
      bBola[i].x+=bBola[i].dx;
  bBola[i].y+=bBola[i].dy;
 }
 
 context.fillStyle='rgba(255,255,255,.1)';
 context.fillRect(0,0,canvas.width,canvas.height);
}

function bola(color, r,dx,dy){
     this.canvas  = canvas;
     this.context = canvas.getContext('2d');
     this.r  = r;
     this.x =Math.random()*400+30;
     this.y  = Math.random()*250+30;
     this.dx  = dx;
     this.dy  = dy;
     this.color   = color;
}

window.onload = function(){
        init()
}

Here the complete html page code

<head>
<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
var n=10;
var bBola=new Array();
function init(){
canvas=myCanvas;
context= myCanvas.getContext('2d');
for (i=0;i<n;i++){
dx = Math.random()*10-5;
dy = Math.random()*10-5;
bBola.push(new bola('#007700', 11,dx,dy));
}
setInterval(draw,10);

}

function draw(){
for (i=0;i<n;i++){
//pantul
if (bBola[i].x >= (canvas.width - bBola[i].r) || bBola[i].x <= bBola[i].r) bBola[i].dx *= -1;
if (bBola[i].y >= (canvas.height - bBola[i].r) || bBola[i].y <= bBola[i].r) bBola[i].dy *= -1;

//buat
bBola[i].context.beginPath();
bBola[i].context.fillStyle = bBola[i].color;
bBola[i].context.arc(bBola[i].x,bBola[i].y,bBola[i].r,0,Math.PI*2,false);
bBola[i].context.fill();

//gerak
bBola[i].x+=bBola[i].dx;
bBola[i].y+=bBola[i].dy;
}

context.fillStyle='rgba(255,255,255,.1)';
context.fillRect(0,0,canvas.width,canvas.height);
}

function bola(color, r,dx,dy){
this.canvas = canvas;
this.context = canvas.getContext('2d');
this.r = r;
this.x =Math.random()*400+30;
this.y = Math.random()*250+30;
this.dx = dx;
this.dy = dy;
this.color = color;
}

window.onload = function(){
init()
}
</script>
</head>
<body>
<canvas height="300" id="myCanvas" width="500">
</canvas>
</body>

Nugroho's blog.

Pages

Monday, December 3, 2012

Playing with Opacity on HTML5's canvas

No comments: