|
0
|
1 |
var ctx = document.getElementById('tutorial').getContext('2d');
|
|
|
2 |
// draw background
|
|
|
3 |
ctx.fillStyle = '#FD0';
|
|
|
4 |
ctx.fillRect(0,0,75,75);
|
|
|
5 |
ctx.fillStyle = '#6C0';
|
|
|
6 |
ctx.fillRect(75,0,75,75);
|
|
|
7 |
ctx.fillStyle = '#09F';
|
|
|
8 |
ctx.fillRect(0,75,75,75);
|
|
|
9 |
ctx.fillStyle = '#F30';
|
|
|
10 |
ctx.fillRect(75,75,75,75);
|
|
|
11 |
ctx.fillStyle = '#FFF';
|
|
|
12 |
|
|
|
13 |
// set transparency value
|
|
|
14 |
ctx.globalAlpha = 0.2;
|
|
|
15 |
|
|
|
16 |
// Draw semi transparent circles
|
|
|
17 |
for (i=0;i<7;i++){
|
|
|
18 |
ctx.beginPath();
|
|
|
19 |
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
|
|
|
20 |
ctx.fill();
|
|
|
21 |
}
|