首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

初学canvas,发现浏览器点染效果差异

2012-11-22 
初学canvas,发现浏览器渲染效果差异/*------------------------------ITEYE祈祷幸福原创,转载请注明。-----

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

热点排行