h5Canvas中Fill与Stroke文字效果如何实现

这篇文章主要介绍h5 Canvas中Fill 与Stroke文字效果如何实现，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联服务项目包括铜鼓网站建设、铜鼓网站制作、铜鼓网页制作以及铜鼓网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，铜鼓网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到铜鼓省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

 
一：颜色填充与描边
颜色填充可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。简单示例
如下：

// fill and stroke text 
ctx.font = '60pt Calibri'; 
ctx.lineWidth = 3; 
ctx.strokeStyle = 'green'; 
ctx.strokeText('Hello World!', 20, 100); 
ctx.fillStyle = 'red'; 
ctx.fillText('Hello World!', 20, 100);

二：纹理填充与描边
HTML5 Canvas还支持纹理填充，通过加载一张纹理图像，然后创建画笔模式，创建纹理模式的API为ctx.createPattern(imageTexture,"repeat");第二参数支持四个值，分别为”repeat-x”, ”repeat-y”, ”repeat”,”no-repeat”意思是纹理分别沿着X轴，Y轴，XY方向沿重复或者不重复。纹理描边与填充的代码如下：

var woodfill = ctx.createPattern(imageTexture,"repeat"); 
ctx.strokeStyle = woodfill; 
ctx.strokeText('Hello World!', 20, 200); 
// fill rectangle 
ctx.fillStyle = woodfill; 
ctx.fillRect(60, 240, 260, 440);

纹理图片：

三：运行效果

代码如下:

 
 
 
 
 
 
 
 
 
 
HTML5 Canvas Text Demo - By Gloomy Fish
 
Fill And Stroke
 
 
 
 
 

以上是h5 Canvas中Fill 与Stroke文字效果如何实现的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！