HTML5Canvas填充与描边(FillAndStroke)-创新互联

HTML5 Canvas 填充与描边(Fill And Stroke)

创新互联公司是一家专业提供桐乡企业网站建设,专注与成都网站设计、网站建设、外贸网站建设H5技术、小程序制作等业务。10年已为桐乡众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实

现纹理填充与描边。

一:颜色填充与描边

颜色填充可以通过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 填充与描边(Fill And Stroke)

三:运行效果

HTML5 Canvas 填充与描边(Fill And Stroke)

代码:

     Canvas Fill And Stroke Text Demo  	   	

HTML5 Canvas Text Demo - By Gloomy Fish

Fill And Stroke

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:HTML5Canvas填充与描边(FillAndStroke)-创新互联
URL地址:http://scyanting.com/article/ccipcc.html