h5 Canvas中Fill 与Stroke文字效果实现实例


本文摘自PHP中文网,作者零下一度,侵删。

本文为大家详细介绍下HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边、颜色填充与描边,具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边。
一:颜色填充与描边
颜色填充可以通过fillStyle来实现,描边颜色可以通过strokeStyle来实现。简单示例
如下:

1

2

3

4

5

6

7

// 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方向沿重复或者不重复。纹理描边与填充的代码如下:

1

2

3

4

5

6

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

纹理图片:

三:运行效果

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

<!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实现水流和水池动画的代码

以上就是h5 Canvas中Fill 与Stroke文字效果实现实例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5是什么?HTML5有什么用?

关于使用HTML5进行svg矢量图形绘制的代码

HTML5优点的详细介绍

HTML5的drag和drop的用法示例(代码)

HTML5调用百度地图api获取当前位置并直接导航目的地的方法

如何使用HTML5地理位置定位功能?

HTML5实践-实现跨浏览器HTML5文字占位符-placeholder的具体介绍

HTML5 command标签的用法和<command>标签的使用案例详解

没有经验如何快速上手HTML5

h5实现拖拉上传文件

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...