|
|
@ -174,6 +174,26 @@ tests['globalAlpha'] = function(ctx){ |
|
|
|
ctx.fillRect(25,25,10,10); |
|
|
|
}; |
|
|
|
|
|
|
|
tests['globalAlpha 2'] = function(ctx){ |
|
|
|
ctx.fillStyle = '#FD0'; |
|
|
|
ctx.fillRect(0,0,75,75); |
|
|
|
ctx.fillStyle = '#6C0'; |
|
|
|
ctx.fillRect(75,0,75,75); |
|
|
|
ctx.fillStyle = '#09F'; |
|
|
|
ctx.fillRect(0,75,75,75); |
|
|
|
ctx.fillStyle = '#F30'; |
|
|
|
ctx.fillRect(75,75,150,150); |
|
|
|
ctx.fillStyle = '#FFF'; |
|
|
|
|
|
|
|
ctx.globalAlpha = 0.2; |
|
|
|
|
|
|
|
for (var i=0;i<7;i++){ |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.arc(75,75,10+10*i,0,Math.PI*2,true); |
|
|
|
ctx.fill(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
tests['fillStyle'] = function(ctx){ |
|
|
|
for (i=0;i<6;i++){ |
|
|
|
for (j=0;j<6;j++){ |
|
|
@ -184,6 +204,18 @@ tests['fillStyle'] = function(ctx){ |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
tests['strokeStyle'] = function(ctx){ |
|
|
|
for (var i=0;i<6;i++){ |
|
|
|
for (var j=0;j<6;j++){ |
|
|
|
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + |
|
|
|
Math.floor(255-42.5*j) + ')'; |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); |
|
|
|
ctx.stroke(); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
tests['fill with stroke'] = function(ctx){ |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.arc(75,75,50,0,Math.PI*2,true); |
|
|
@ -198,6 +230,38 @@ tests['fill with stroke'] = function(ctx){ |
|
|
|
}; |
|
|
|
|
|
|
|
tests['lineWidth'] = function(ctx){ |
|
|
|
for (var i = 0; i < 10; i++){ |
|
|
|
ctx.lineWidth = 1+i; |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.moveTo(5+i*14,5); |
|
|
|
ctx.lineTo(5+i*14,140); |
|
|
|
ctx.stroke(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
tests['line caps'] = function(ctx){ |
|
|
|
var lineCap = ['butt','round','square']; |
|
|
|
|
|
|
|
ctx.strokeStyle = '#09f'; |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.moveTo(10,10); |
|
|
|
ctx.lineTo(140,10); |
|
|
|
ctx.moveTo(10,140); |
|
|
|
ctx.lineTo(140,140); |
|
|
|
ctx.stroke(); |
|
|
|
|
|
|
|
ctx.strokeStyle = 'black'; |
|
|
|
for (var i=0;i<lineCap.length;i++){ |
|
|
|
ctx.lineWidth = 15; |
|
|
|
ctx.lineCap = lineCap[i]; |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.moveTo(25+i*50,10); |
|
|
|
ctx.lineTo(25+i*50,140); |
|
|
|
ctx.stroke(); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
tests['lineCap default'] = function(ctx){ |
|
|
|
ctx.beginPath(); |
|
|
|
ctx.lineWidth = 10.0; |
|
|
|
ctx.moveTo(50, 50); |
|
|
|