Html5 Canvas Text

Posted 天马3798

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html5 Canvas Text相关的知识,希望对你有一定的参考价值。

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

以上是关于Html5 Canvas Text的主要内容,如果未能解决你的问题,请参考以下文章

html5 canvas 元素有啥用

html5怎么在canvas圆里写字

html5 canvas大小怎么无效

html5 canvas绘图有啥用

html5 canvas怎么载入图像

html5 canvas怎么载入图像