初学canvas，发现浏览器渲染效果差异

[align=center]/*------------------------------ITEYE 祈祷幸福原创，转载请注明。------------------------------*/[/align]


嗯 简单在canvas上画了些圆和矩形以及文字，然后发现3个浏览器的渲染效果差异：

同样都是半径75px的圆和一样的30px文字：


chrome(版本13)：最差的。
锯齿很明显，这是偶第一次发现chrome还有倒数第一的情况。。有种换浏览器的冲动。。。T_T
[img]http://dl.iteye.com/upload/attachment/535866/3081a30b-df40-3201-b710-c36e8410dd01.jpg[/img]
看到空心的e你就懂了。。
[img]http://dl.iteye.com/upload/attachment/535885/757dc0ba-e9ad-373b-abf3-46512f0a0b5a.jpg[/img]


opera(版本11)：效果中等。
锯齿是处理过的，不过细看还是有的。
[img]http://dl.iteye.com/upload/attachment/535868/9a289e99-e8cc-3778-9953-f311d35a8a0a.jpg[/img]
同上，看到空心的e你就懂了。。
[img]http://dl.iteye.com/upload/attachment/535887/1c9ac082-a8a1-39f2-9ef0-02b4590fa16c.jpg[/img]


firefox(版本5)：效果最好。
锯齿全部处理过，模糊效果很不错，看起来非常平滑舒服。空心文字也非常清晰，也是第一次发现火狐还有排名第一的东东。。。
[img]http://dl.iteye.com/upload/attachment/535870/fa115d07-371a-3baa-8abd-bb41795e301c.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/535889/02b773f9-0059-3b71-869d-777dcaeeb83b.jpg[/img]


以上仅以 canvas下75px圆和30px文字做参考。画圆的代码如下：

ctx.fillStyle = '#e37';
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75);
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI*2,true);
ctx.clip();
var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, '#c2f');
lingrad.addColorStop(0.5, '#729');
lingrad.addColorStop(1, '#123');

ctx.fillStyle = lingrad;
ctx.fillRect(-75, -75, 150, 150);

ctx.fillStyle = 'cceecc';
ctx.fillRect(10, 10, 50, 50);
ctx.beginPath();
ctx.arc(-55, -5, 30, 0, Math.PI*2, true);
ctx.fill();

空心文字代码如下：

ctx.textAlign = 'right';
ctx.textBaseline = 'bottom';
ctx.font = '30px Tahoma, Helvetica, Arial';
ctx.strokeText('hello! Canvas!', 250, 100);

[align=center]
/*------------------------------ITEYE 祈祷幸福原创，转载请注明。------------------------------*/[/align]