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

/*------------------------------ITEYE  祈祷幸福原创，转载请注明。------------------------------*/

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

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


chrome(版本13)：最差的。
锯齿很明显，这是偶第一次发现chrome还有倒数第一的情况。。有种换浏览器的冲动。。。T_T

看到空心的e你就懂了。。




opera(版本11)：效果中等。
锯齿是处理过的，不过细看还是有的。

同上，看到空心的e你就懂了。。





firefox(版本5)：效果最好。
锯齿全部处理过，模糊效果很不错，看起来非常平滑舒服。空心文字也非常清晰，也是第一次发现火狐还有排名第一的东东。。。






以上仅以 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);

/*------------------------------ITEYE  祈祷幸福原创，转载请注明。------------------------------*/

评论

1 楼 cuixiping 2012-09-13  

原来还有这个差别，记号了。