初学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 原来还有这个差别，记号了。