FScada组态软件|WTScada HTML5网页组态软件|常州文庭软件有限公司

1.8.1 文本的字体、大小和样式

要设置字体、大小和样式，需要用到上下文对象的 font 属性。样式可以是 normal, italic 或 bold 。默认情况是 normal 。

context.font = 'italic 40px Calibri'; </script>

效果图

代码

<!DOCTYPE HTML>

<html>

<head>

}

#myCanvas {

border: 1px solid #9C9898;

}

</style> <script>

window.onload = function() {

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

context.font = "italic 40pt Calibri"; context.fillText("Hello World!", 150, 100); };

</script>

</head>

<body>

</body>

</html>

1.8.2 文本颜色

文本的颜色用 fillStyle 属性设置。

context.fillStyle = 'blue'; </script>

效果图

代码

<!DOCTYPE HTML>

<html>

<head>

}

#myCanvas {

border: 1px solid #9C9898;

}

</style> <script>

window.onload = function() {

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

context.font = "40pt Calibri"; context.fillStyle = "blue";

context.fillText("Hello World!", 150, 100); };

</script>

</head>

<body>

</body>

</html>

1.8.3 描绘文本边缘

要描绘字体边缘的效果，要使用 strokeText() 方法替代fillText()，同时要用

strokeStyle 属性替代 fillStyle 属性。

如：

context.strokeStyle = 'blue'; context.lineWidth = 3;

context.strokeText('Hello World!', x, y); </script>

注意：如果要同时填充字体和描绘字体边缘，那么就必须同时使用 fillText() 和 strokeText() 方法。而且记得要先执行 fillText() ，然后再执行 strokeText() 。

效果图

代码

<!DOCTYPE HTML>

<html>

<head>

}

#myCanvas {

border: 1px solid #9C9898;

}

</style> <script>

window.onload = function() {

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

var x = 80; var y = 110;

context.font = "60pt Calibri"; context.lineWidth = 3; // 轮廓线的颜色

context.strokeStyle = "blue";

context.strokeText("Hello World!", x, y); };

</script>

</head>

<body>

</body>

</html>

1.8.4 文本对齐

文本的对齐功能设定使用 textAlign 属性。其可用的选项包括 start, end, left, center

和 right 。对齐的位置是相对于一条虚拟的垂直线，这条线是由 fillText() 或 strokeText() 定义的文本x位置。文本被左对齐的情况包括：

textAlign 属性被设为 left 时；
textAlign 属性被设为 start ，且文档方向是 ltr (left to right) 时；
textAlign 属性被设为 end ，且文档方向是 rtl (right to left) 时。

文本被右对齐的情况包括：

textAlign 属性被设为 right 时；
textAlign 属性被设为 start ，且文档方向是 rtl (right to left) 时；
textAlign 属性被设为 end ，且文档方向是 ltr (left to right) 时。

默认情况下 textAlign 属性被设为 start 。

如：

context.textAlign = 'center'; </script>

效果图

代码

<!DOCTYPE HTML>

<html>

<head>

}

#myCanvas {

border: 1px solid #9C9898;

}

</style> <script>

window.onload = function() {

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");

var x = canvas.width / 2; var y = canvas.height / 2;

context.font = "30pt Calibri"; context.textAlign = "center"; context.fillStyle = "blue"; context.fillText("Hello World!", x, y);

};

</script>

</head>

<body>

</body>

</html>

1.8.5 文本基线

垂直对齐文本需要用到 textBaseline 属性。此属性可用的选项包括： top, hanging,

middle, alphabetic, ideographic 和 bottom 。默认情况下是 alphabetic 。

如：

context.textBaseline = 'middle'; </script>

效果图

代码

<!DOCTYPE HTML>

<html>

<head>

}

#myCanvas {

border: 1px solid #9C9898;

}

</style> <script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height / 2;

context.font = "30pt Calibri";

// textAlign 根据文本的放置进行水平的对齐

context.textAlign = "center";

// textBaseline 根据字体样式垂直对齐字体 context.textBaseline = "middle"; context.fillStyle = "blue";

context.fillText("Hello World!", x, y); };

</script>

</head>

<body>

</body>

</html>

1.8.6 文本度量

要获取有关文本的尺度信息，可以使用 measureText() 方法。此方法需要一个文本字符串组为参数，并返回一个尺度对象。尺度对象中的数据是基于所提供的字符串参数和当前的文本字体信息而来的。如：

var metrics = context.measureText('measure me!');

var width = metrics.width; </script>

注意：由于文本的像素高度等于字体尺寸的磅值，所以，从 measureText() 返回的尺度对象并不包含高度数据。效果图

代码

<!DOCTYPE HTML>

<html>

<head>

}

#myCanvas {

border: 1px solid #9C9898;

}

</style> <script>

window.onload = function() {

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height / 2 - 10; var text = "Hello World!";

context.font = "30pt Calibri"; context.textAlign = "center"; context.fillStyle = "blue"; context.fillText(text, x, y);

// 获得文本的尺寸

var metrics = context.measureText(text);

var width = metrics.width; context.font = "20pt Calibri"; context.textAlign = "center"; context.fillStyle = "#555";

context.fillText("(" + width + "px wide)", x, y + 40); };

</script>

</head>

<body>

</body>

</html>

1.8.7 文本换行

要实现文本换行功能，我们需要创建一个用户自定义函数，此函数需要canvas上下文对象、一个

文本字符串、一个位置、一个最大宽度和行高度信息。函数将使用 measureText() 计算何时换行。效果图

代码

<!DOCTYPE HTML>

<html>

<head>

}

#myCanvas {

border: 1px solid #9C9898;

}

</style> <script>

function wrapText(context, text, x, y, maxWidth, lineHeight) { var words = text.split(" "); var line = "";

for(var n = 0; n < words.length; n++) { var testLine = line + words[n] + " "; var metrics = context.measureText(testLine); var testWidth = metrics.width; if(testWidth > maxWidth) { context.fillText(line, x, y);

line = words[n] + " "; y += lineHeight;

} else {

line = testLine;

}

context.fillText(line, x, y); }

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d"); var maxWidth = 400; var lineHeight = 25;

var x = (canvas.width - maxWidth) / 2;

var y = 60;

var text = "All the world 's a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.";

context.font = "16pt Calibri"; context.fillStyle = "#333";

wrapText(context, text, x, y, maxWidth, lineHeight); };

</script>

</head>

<body>

</body>

</html>

Part 2: HTML5 Canvas 教程进阶篇欢迎来到进阶篇，在此我们将学习有关复合、转换、图像数据与URLs、动画和鼠标检测方面的内容。

学前准备：

在开始基础教程之前，您首先需要准备一个不太旧的web浏览器，比如Google Chrome ，

Firefox， Safari， Opera，或者 IE9这些都可以。然后您需要对Javascript有一定的熟悉，并且还得有一个文本编辑器，比如notepad。如果您刚刚开始接触HTML5 Canvas，那么您最好还是先看一下本教程的基础篇部分，然后再回到本篇。