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

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

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

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

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

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

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

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

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

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

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

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

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

使用实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>test</title>

    <!--<script type="text/javascript" src="modernizr-latest.js"></script>-->

    <script src="Js/modernizr-2.6.2.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 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);

            //}

            //添加渐变效果

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

            //}

            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>

            <span>Text</span>

            <input id="textBox" />

            <br />

            <span>Fill or Stroke</span>

            <select id="fillOrStroke">

                <option value="fill">fill</option>

                <option value="stroke">stroke</option>

                <option value="both">both</option>

            </select>

            <br />

            <span>Font</span>

            <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 />

            <span>font size</span>

            <input type="range" id="textSize" min="0" max="200" value="30" />

            <br />

            <span>font color</span>

            <input class="color" id="textFillColor" value="FF0000" />

            <br />

            <span>font weight</span>

            <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 />

            <span>font style</span>

            <select id="fontStyle">

                <option value="normal">normal</option>

                <option value="italic">italic</option>

                <option value="oblique">oblique</option>

            </select>

            <br />

            <span>textBaseLine</span>

            <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 />

            <span>TextAlign</span>

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

来源地址；

http://www.cnblogs.com/amtf/archive/2012/01/18/2324343.html

Html5 Canvas Text的更多相关文章

  1. HTML5 Canvas Text文本居中实例

    1.代码: <canvas width="700" height="300" id="canvasOne" class="c ...

  2. HTML5 Canvas Text实例1

    1.简单实例1 <canvas width="300" height="300" id="canvasOne" class=" ...

  3. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  4. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  5. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  6. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  7. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  8. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  9. HTML5 canvas绘图

    HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. 字符串处理---统计每一行字符串当中的字符“u”个数

    package com.guoxiaoming.string; import java.io.BufferedReader; import java.io.FileInputStream; impor ...

  2. 如何从BBC网站学习英语

  3. Biathlon Track

    Codeforces Round #242 (Div. 2) D:http://codeforces.com/contest/424/problem/D 题意:给你一个n*m的矩阵,每个格子上面有个数 ...

  4. PYTHON之批量文件指定字符串替换

    在工作应用中,运维自动化的基础是标准化. 而标准化的工作,是难点,在公司相关部门的配合. 那么,在有标准化之后,相应的部署脚本,就比较好写了. 贡献一个在类似环境下可以运用的东东.. 当然,可以写得更 ...

  5. ASP.NET Routing

    ASP.NET Routing Other Versions   ASP.NET routing enables you to use URLs that do not have to map to ...

  6. android如何获取默认的桌面程序

    [方法1] http://stackoverflow.com/questions/12594192/remove-activity-as-default-launcher/12594332#12594 ...

  7. PKU 1064 Cable master

    题目链接:点击打开链接 有n段绳子,给定n段绳子的长度,单位为厘米.求能够把这些绳子分成k段的最长的段的长度.题目中的trick是最小是1cm,长度不能小于1cm,因此要转换成int来解,然后二分可以 ...

  8. COJ 0047 20702最大乘积

    20702最大乘积 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 输入n个元素组成的序列s,你需要找出一个乘积最大的连续子序列 ...

  9. CF 85D Sum of Medians (五颗线段树)

    http://codeforces.com/problemset/problem/85/D 题意: 给你N(0<N<1e5)次操作,每次操作有3种方式, 1.向集合里加一个数a(0< ...

  10. 一招解决IE7无法访问https网页

    很多人都遇到过这种情况: 自己的IE访问不了https的网页了,如果你百度的话,有人会告诉你注册一堆的dll文件,或者更改IE设置啦什么的.上午,我也遇到这个问题,这些方法都不管用.请教了高手,将方法 ...