本文为大家详细介绍下HTML5CanvasFill与Stroke文字效果,基于Canvas如何实现纹理填充与描边、颜色填充与描边,具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
演示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);

纹理图片:
 
三:运行效果
 
代码:

 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Canvas Fill And Stroke Text Demo</title>
<link href="default.css" rel="stylesheet" />
<script>
var ctx = null; // global variable 2d context
var imageTexture = null;
window.onload = function() {
var canvas = document.getElementById("text_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw rectangel
ctx = canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 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);
// fill and stroke by pattern
imageTexture = document.createElement('img');
imageTexture.src = "../pattern.png";
imageTexture.onload = loaded();
}
function loaded() {
// delay to image loaded
setTimeout(textureFill, 1000/30);
}
function textureFill() {
// var woodfill = ctx.createPattern(imageTexture, "repeat-x");
// var woodfill = ctx.createPattern(imageTexture, "repeat-y");
// var woodfill = ctx.createPattern(imageTexture, "no-repeat");
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);
}
</script>
</head>
<body>
<h1>HTML5 Canvas Text Demo - By Gloomy Fish</h1>
<pre>Fill And Stroke</pre>
<div id="my_painter">
<canvas id="text_canvas"></canvas>
</div>
</body>
</html>
最新资讯
传华芯通本月底关闭:Arm服务器的困局与中国芯的挫折

传华芯通本月底关闭:A

高通如今在Arm服务器业务上的状况显然对于华芯通会产
国内首款3D AI/MR芯片即将量产

国内首款3D AI/MR芯片

继微软与苹果之后,华捷艾米成为全球第三家完全拥有3D A
国内首个人工智能MR(混合现实)研究中心成立

国内首个人工智能MR(混

首个国家级MR技术研究中心——清华大学三维混合现实研
三星折叠屏手机遭测评员集体吐槽 仍将按计划上市

三星折叠屏手机遭测评

三星折叠屏手机遭测评员集体吐槽,仅两天就出现了闪屏、
360已退出“北京时间” 第一批股权转让款已到账

360已退出“北京时间

360已签订股权转让协议,将持有的“北京时间”60%股权转
微软员工吐槽新政策:搞多样性就是欺负白人男性

微软员工吐槽新政策:搞

在微软内部留言板上,一些员工大发牢骚,质问微软这种多样
最新文章
html5 canvas-1.canvas介绍(hello canvas)

html5 canvas-1.canva

大家都知道,目前并不是所有的浏览器中支持html5,就算是
canvas烟花特效锦集

canvas烟花特效锦集

这篇文章主要介绍了canvas烟花特效锦集,小编觉得挺不错
使用Html5、CSS实现文字阴影效果

使用Html5、CSS实现文

这篇文章主要介绍了使用Html5、CSS实现文字阴影效果的
html5 canvas绘制放射性渐变色效果

html5 canvas绘制放射

这篇文章主要介绍了html5 canvas绘制放射性渐变色效果
canvas基础之图形验证码的示例

canvas基础之图形验证

这篇文章主要介绍了canvas基础之图形验证码的示例的相
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

利用HTML5+css3+jquer

这篇文章主要介绍了利用HTML5+css3+jquery+weui实现仿