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);

纹理图片:
h5 Canvas中Fill 与Stroke文字效果如何实现
三:运行效果
h5 Canvas中Fill 与Stroke文字效果如何实现

代码如下:

 
 
 
 
 
Canvas Fill And Stroke Text Demo 
 
 
 
 

HTML5 Canvas Text Demo - By Gloomy Fish

Fill And Stroke

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


新闻标题:h5Canvas中Fill与Stroke文字效果如何实现
文章起源:http://pwwzsj.com/article/ijgipd.html