前言

Canvas现在越来越多地被运用到我们的项目中了，所以对Canvas的研究也得跟上呀，不然就被时代抛弃了。这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 strokeText 的区别,代码及效果图片演示。

效果演示

HTML代码

JavaScript代码

最终效果展示

效果

浏览器支持

支持情况

语法

fillText()

HTML5 canvas fillText() 方法

定义及用法：fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

浏览器支持：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fillText() 方法。

语法：context.fillText(text,x,y,maxWidth);

context.fillText(text,x,y,maxWidth)

strokeText()

HTML5 canvas strokeText() 方法

定义及用法：strokeText() 方法是用来在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

浏览器支持：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 strokeText() 方法。

语法：context.strokeText(text,x,y,maxWidth);

context.strokeText(text,x,y,maxWidth);

注意：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。所在放弃IE吧！

如果想给字体更换颜色，可以用例子中的 ctx.fillStyle = ‘#0099CC’;ctx.strokeStyle = ‘#000’;这两行代码分别是给fillText()方法和strokeText()方法所绘出的字更换颜色的。注意：fillText()方法对应的是 ctx.fillStyle = ‘#0099CC’;；strokeText() 方法对应的是 ctx.strokeStyle = ‘#000′;代码中的 ctx.font =’68px Arial’; 是定义字体及字体大小。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML5 Canvas中 fillText() 和 strokeText() 的区别

前言

效果演示

语法