/*------------------------------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 祈祷幸福原创,转载请注明。------------------------------*/
- 大小: 6.6 KB
- 大小: 6.4 KB
- 大小: 6.6 KB
- 大小: 9.8 KB
- 大小: 4.7 KB
- 大小: 4.6 KB
分享到:
相关推荐
canvas制图 canvas是浏览器提供的绘图机制,使用canvas 标签和js脚本绘图想要绘制的图形
2.40_Canvas与浏览器兼容性|Canvas高级内容2|Canvas图形、动画、游戏开发从入门到精通全系列课程
canvas矢量图形渲染器 canvas矢量图形渲染器 canvas矢量图形渲染器
Canvas实现文字云效果,多浏览器支持
用于各个浏览器(IE)html2canvas不工作解决方案 html2canvas在火狐、Chrome等浏览器好用,但是IE浏览器无效,导入这个js后就OK啦
2.28_文本对齐|canvas文字的渲染|Canvas图形、动画、游戏开发从入门到精通全系列课程
2.30_canvas文字的渲染小结|canvas文字的渲染|Canvas图形、动画、游戏开发从入门到精通全系列课程
css3实现图片模糊,canvas实现交互设计,简单,简单,简单,简单,简单,简单单
内容概要:canvas案例,色盘、颜色过渡。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
vnode2canvas - 基于Vue插件将虚拟DOM渲染到canvas中
内容概要:canvas案例,闪烁的物体、缩放物体实现闪烁。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
2.26_canvas文字渲染基础|canvas文字的渲染|Canvas图形、动画、游戏开发从入门到精通全系列课程
我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie8版本以下不支持HTML5的浏览器,可使用IE特有的滤镜效果来实现... 更详细canvas图片左右旋转效果教程,http://www.sucaihuo.com/js/27.html。你也可以在素材...
html5 canvas实现海水慢慢升起效果 html5 canvas实现海水慢慢升起效果
2.27_font_字型、字号和字体|canvas文字的渲染|Canvas图形、动画、游戏开发从入门到精通全系列课程
canvas动画-星空效果动画
简单的Canvas刮奖带动画效果的实例,具体效果可以到我的博客查看 http://blog.csdn.net/zhouzme/
主要介绍了canvas 画布在主流浏览器中的尺寸限制详细介绍的相关资料,canvas在不同浏览器下面有不同的最大尺寸限制,这里测试下,需要的朋友可以参考下
canvas粒子跟随效果。canvas粒子跟随效果。canvas粒子跟随效果。
内容概要:canvas案例,减速下落的物体。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器