最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

h5Canvas中Fill与Stroke文字效果实现实例

来源:动视网 责编:小OO 时间:2020-11-27 15:09:04
文档

h5Canvas中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);。二:纹理填充与描边;
推荐度:
导读一:颜色填充与描边;颜色填充可以通过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 Fill 与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="
chr
ome=IE8"> 
<meta http-equiv="Content-type" content="text/html;char
set
=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 inst
all
 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.li
neW
idth = 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 
set
Time
out(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> 
<p id="my_painter"> 
<canvas id="text_canvas"></canvas> 
</p> 
</body> 
</html>

【相关推荐】

1. 特别推荐:“php程序员工具箱”V0.1版本下载

2. h5canvas实现雪花飘落的特效代码

3. 分享用canvas实现水流和水池动画的代码

文档

h5Canvas中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);。二:纹理填充与描边;
推荐度:
标签: 实现 案例 示例
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top