|
0
|
1 |
var ctx = document.getElementById('tutorial').getContext('2d');
|
|
|
2 |
|
|
|
3 |
// Create gradients
|
|
|
4 |
var lingrad = ctx.createLinearGradient(0,0,0,150);
|
|
|
5 |
lingrad.addColorStop(0, '#00ABEB');
|
|
|
6 |
lingrad.addColorStop(0.5, '#fff');
|
|
|
7 |
lingrad.addColorStop(0.5, '#66CC00');
|
|
|
8 |
lingrad.addColorStop(1, '#fff');
|
|
|
9 |
|
|
|
10 |
var lingrad2 = ctx.createLinearGradient(0,50,0,95);
|
|
|
11 |
lingrad2.addColorStop(0.5, '#000');
|
|
|
12 |
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
|
|
|
13 |
|
|
|
14 |
// assign gradients to fill and stroke styles
|
|
|
15 |
ctx.fillStyle = lingrad;
|
|
|
16 |
ctx.strokeStyle = lingrad2;
|
|
|
17 |
|
|
|
18 |
// draw shapes
|
|
|
19 |
ctx.fillRect(10,10,130,130);
|
|
|
20 |
ctx.strokeRect(50,50,50,50);
|