Html5 Canvas Text【分分快三计划】

作者:分分快三计划

分分快三计划 1

html5 canvas中支持对text文本进行渲染;
直接的理解就是把text绘制在画布上,并像图形一样处理它(可以加shadow、gradient、pattern、color fill等等);
既然它的本质是文字,就会具有文字所特有的一些属性;本篇的侧重点也在于此;
不过,在最后会增加一些图形填充效果在text上应用的实例;

y:最左边的文本的 左下角的纵坐标

strokeText([text],[x],[y],[maxWidth]):
参数的意义与fillText相同;与fillText相比,它指渲染文字的轮廓;
与之搭配的设置文本的颜色属性:strokeStyle

分分快三计划 2

 

cxt.font = "font-style font-weight font-size/line-height font-family"

祝大家龙年吉祥!!!

cxt.textBaseline = '属性值'

分分快三计划 3分分快三计划 4View Code

fillText:填充文本,参数跟strokeText一样

function drawScreen() {
context.fillStyle = "yellow";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Text
context.textBaseline = textBaseline;
context.textAlign = textAlign;
context.shadowColor = "#707070";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 5;
context.font = fontWeight   " "   fontStyle   " "   fontSize   "px "   fontFace;
var xPosition = (theCanvas.width / 2);
var yPosition = (theCanvas.height / 2);
context.fillStyle = textFillColor;
context.fillText(message, xPosition, yPosition);
}

fillText:填充文本

function drawScreen() {
context.fillStyle = "yellow";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
var gradient = context.createLinearGradient(0, 0, theCanvas.width, 0);
context.font = "italic bold 40px serif";
gradient.addColorStop(0, "#000000");
gradient.addColorStop(.5, "#FF0000");
gradient.addColorStop(1, "#00ff00");
var xPosition = (theCanvas.width / 2);
var yPosition = (theCanvas.height / 2);
context.fillStyle = gradient;
context.fillText("message", xPosition, yPosition);
}

cxt.textAlign = 'start/end/left/right/center';

分分快三计划 5

 1 <meta charset='utf-8' />
 2 <style>
 3 body {
 4     background: #000;
 5 }
 6 #canvas{
 7     background:white;
 8 }
 9 </style>
10 <script>
11 window.onload = function(){
12     var oCanvas = document.querySelector( "#canvas" ),
13         oGc = oCanvas.getContext( '2d' ),
14         width = oCanvas.width,
15         height = oCanvas.height,
16         text = '跟着ghostwu学习canvas';
17 
18         oGc.font = 'bold 16px 微软雅黑';
19         oGc.fillStyle = '#09f';
20 
21         var xPos = ( width ) / 2;
22         oGc.moveTo( xPos, 0 );
23         oGc.lineTo( xPos, height );
24         oGc.stroke();
25 
26         oGc.textAlign = 'start';
27         oGc.fillText( text, 300, 30 );
28         oGc.textAlign = 'left';
29         oGc.fillText( text, 300, 60 );
30         oGc.textAlign = 'right';
31         oGc.fillText( text, 300, 90 );
32         oGc.textAlign = 'end';
33         oGc.fillText( text, 300, 120 );
34         oGc.textAlign = 'center';
35         oGc.fillText( text, 300, 150 );
36 }
37 </script>
38 </head>
39 <body>
40 <canvas id="canvas" width="600" height="300"></canvas> 
41 </body>

分分快三计划 6分分快三计划 7代换View Code 代码段中的drawScreen方法

fillStyle配合fillText使用,strokeStyle配合strokeText使用

与之搭配的设置文本的颜色属性:fillStyle

x:最左边的文本输出的横坐标位置

 

strokeText:描边文本

把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心);textBaseline为默认值,应用不同的textAlign所产生的效果如下图:

measureText:获取文本的宽度(长度),它返回的是一个对象,对象有一个属性width,就是文本的长度了.

基本属性展示:

oGc.font = 'bold 30px 微软雅黑';

 

text = '跟着ghostwu学习canvas';

大家可以细细品味一下,它们的区别……

oGc.fillStyle = '#09f';

 

 1 <meta charset='utf-8' />
 2 <style>
 3 body {
 4     background: #000;
 5 }
 6 #canvas{
 7     background:white;
 8 }
 9 </style>
10 <script>
11 window.onload = function(){
12     var oCanvas = document.querySelector( "#canvas" ),
13         oGc = oCanvas.getContext( '2d' ),
14 
15         text = '跟着ghostwu学习canvas';
16         oGc.font = 'bold 30px 微软雅黑';
17         oGc.strokeStyle = '#09f';
18         oGc.strokeText( text, 100, 100 );
19         oGc.strokeText( text, 100, 200, 200 );
20 }
21 </script>
22 </head>
23 <body>
24 <canvas id="canvas" width="600" height="300"></canvas> 
25 </body>

把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心);textAlign为默认值,应用不同的textBaseline所产生的效果如下图:

oGc.fillText( text, 100, 200, 200 );

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded() {
canvasApp();
}

function canvasSupport() {
return Modernizr.canvas;
}

function eventWindowLoaded() {
canvasApp();
}

function canvasApp() {
var message = "your text";
var fillOrStroke = "fill";
var fontSize = "50";
var fontFace = "serif";
var textFillColor = "#ff0000";
var textBaseline = "middle";
var textAlign = "center";
var fontWeight = "normal";
var fontStyle = "normal";

if(!canvasSupport()) {
return;
}

var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var formElement = document.getElementById("textBox");
formElement.addEventListener('keyup', textBoxChanged, false);
formElement = document.getElementById("fillOrStroke");
formElement.addEventListener('change', fillOrStrokeChanged, false);
formElement = document.getElementById("textSize");
formElement.addEventListener('change', textSizeChanged, false);
formElement = document.getElementById("textFillColor");
formElement.addEventListener('change', textFillColorChanged, false);
formElement = document.getElementById("textFont");
formElement.addEventListener('change', textFontChanged, false);
formElement = document.getElementById("textBaseline");
formElement.addEventListener('change', textBaselineChanged, false);
formElement = document.getElementById("textAlign");
formElement.addEventListener('change', textAlignChanged, false);
formElement = document.getElementById("fontWeight");
formElement.addEventListener('change', fontWeightChanged, false);
formElement = document.getElementById("fontStyle");
formElement.addEventListener('change', fontStyleChanged, false);

drawScreen();

function drawScreen() {
context.fillStyle = "yellow";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);

context.lineWidth = 1;
context.beginPath();
context.moveTo(theCanvas.width / 2, 0);
context.lineTo(theCanvas.width / 2, theCanvas.height);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, theCanvas.height/2);
context.lineTo(theCanvas.width, theCanvas.height/2);
context.stroke();
context.closePath();

//Text
context.textBaseline = textBaseline;
context.textAlign = textAlign;
context.font = fontWeight   " "   fontStyle   " "   fontSize   "px "   fontFace;
var xPosition = (theCanvas.width / 2);
var yPosition = (theCanvas.height / 2);
switch(fillOrStroke) {
case "fill":
context.fillStyle = textFillColor;
context.fillText(message, xPosition, yPosition);
break;
case "stroke":
context.strokeStyle = textFillColor;
context.strokeText(message, xPosition, yPosition);
break;
case "both":
context.fillStyle = textFillColor;
context.fillText(message, xPosition, yPosition);
context.strokeStyle = "#000000";
context.strokeText(message, xPosition, yPosition);
break;
}
}

function textBoxChanged(e) {
var target = e.target;
message = target.value;
drawScreen();
}

function fillOrStrokeChanged(e) {
var target = e.target;
fillOrStroke = target.value;
drawScreen();
}

function textSizeChanged(e) {
var target = e.target;
fontSize = target.value;
drawScreen();
}

function textFillColorChanged(e) {
var target = e.target;
textFillColor = "#"   target.value;
drawScreen();
}

function textFontChanged(e) {
var target = e.target;
fontFace = target.value;
drawScreen();
}

function textBaselineChanged(e) {
var target = e.target;
textBaseline = target.value;
drawScreen();
}

function textAlignChanged(e) {
var target = e.target;
textAlign = target.value;
drawScreen();
}

function fontWeightChanged(e) {
var target = e.target;
fontWeight = target.value;
drawScreen();
}

function fontStyleChanged(e) {
var target = e.target;
fontStyle = target.value;
drawScreen();
}

}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="400" height="150">
Your browser does not support HTML5 Canvas.
</canvas>
<form>
Text
<input id="textBox"/>
<br/>
Fill or Stroke
<select id="fillOrStroke">
<option value="fill">fill</option>
<option value="stroke">stroke</option>
<option value="both">both</option>
</select>
<br/>
Font
<select id="textFont">
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
</select>
<br/>
font size
<input type="range" id="textSize" min="0" max="200"    value="30"/>
<br/>
font color
<input class="color" id="textFillColor" value="FF0000"/>
<br/>
font weight
<select id="fontWeight">
<option value="normal">normal</option>
<option value="bold">bold</option>
<option value="bolder">bolder</option>
<option value="lighter">lighter</option>
</select>
<br/>
font style
<select id="fontStyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<br/>
textBaseLine
<select id="textBaseline">
<option value="middle">middle</option>
<option value="top">top</option>
<option value="hanging">hanging</option>
<option value="alphabetic">alphabetic</option>
<option value="ideographic">ideographic</option>
<option value="bottom">bottom</option>
</select>
<br/>
TextAlign
<select id="textAlign">
<option value="center">center</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</form>
</div>
</body>
</html>

分分快三计划 8

阴影效果: 

 1 <meta charset='utf-8' />
 2 <style>
 3 body {
 4     background: #000;
 5 }
 6 #canvas{
 7     background:white;
 8 }
 9 </style>
10 <script>
11 window.onload = function(){
12     var oCanvas = document.querySelector( "#canvas" ),
13         oGc = oCanvas.getContext( '2d' ),
14         width = oCanvas.width,
15         text = '跟着ghostwu学习canvas';
16 
17         oGc.font = 'bold 30px 微软雅黑';
18         oGc.fillStyle = '#09f';
19         oGc.fillText( text, ( width - oGc.measureText( text ).width ) / 2, 100 );
20 }
21 </script>
22 </head>
23 <body>
24 <canvas id="canvas" width="600" height="300"></canvas> 
25 </body>

输出一段水平居中的文本

Horizontal alignment选项:center|start|end|left|right
例:context.textAlign = "center";

strokeText用法:

实例:

接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续.

Canvas中有对文本对齐方式的支持,包括两个选项:水平Horizontal alignment与竖直Vertical alignment;
context.textAlign:文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
context.textBaseline:文字竖直对齐方式。可取属性值:top, hanging, middle,alphabetic, ideographic, bottom。默认值:alphabetic.

cxt.strokeText( text, x,  y, [maxwidth] )

当我们把一段文本渲染在canvas上时,文本本身显示在画布上,会占据一个矩形块(看不见的矩形,我们暂且称其为IBox(invisible bounding box));

cxt.measureText( text ).width

context.measureText(message):
当我们提供一个文本message,调用此方法,
它会依据当前context设置的字体、大小等,返回一个文本的度量信息对象TextMetrics;
当前html5 canvas中TextMetrics对象,仅包含一个属性,就是width;
可以用来确定当前给定字符串文本的在当前环境下的宽度;
例如:
var metrics = context.measureText(message);
var textWidth = metrics.width;

textAlign:文本水平对齐方式

分分快三计划 9

跟上面的textAlign的用法差不多,这个不是很常用 

context.font:
[font style] [font weight] [font size] [font face]
字体属性的设置与css中的类似;
例:context.font = "italic bold 24px serif"; context.font = "normal lighter 50px cursive";

oGc.fillText( text, 100, 100 );

渐变效果:

font属性跟css是一样的用法

fillText([text],[x],[y],[maxWidth]):
参数的意义:
text:要在canvas上要渲染的文本内容;
x,y:代表开始渲染的点的位置坐标;
maxWidth:代表最大宽度;

maxWidth:这个是可选参数,意思就是文本最多能占用maxWidth这么宽,如果文本的实际宽度比maxWidth宽,就会有一种压缩(被挤扁)的效果。

 

canvas提供两种输出文本的方式:

分分快三计划 10分分快三计划 11代换上面代码的drawScreen方法体

text:需要输出的文本内容

Vertical alignment选项:top|hanging|middle|alphabetic|ideographic|bottom
例:context.textBaseline = "top";

textBaseline:设置文本垂直方向的对齐方式

这里提到的对齐方式,都是针些这个文本所占据的这个IBox来操作的(IBox有,上,下,左,右四条边线);

start跟left差不多,end跟right差不多.

分分快三计划 12

常见的属性值: alphabetic, top, middle, bottom等

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划