HTML5 Canvas 起步(1) - 基本概念（2）

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方：

function fixContext(ctx) {
    // * upgrade Firefox 3.0.x text rendering to HTML 5 standard
    if (!ctx.fillText && ctx.mozDrawText) {
        ctx.fillText = function(textToDraw, x, y, maxWidth) {
            ctx.translate(x, y);
            ctx.mozTextStyle = ctx.font;
            ctx.mozDrawText(textToDraw);
            ctx.translate(-x, -y);
        };
    }
    // * Setup measureText
    if (!ctx.measureText && ctx.mozMeasureText) {
        ctx.measureText = function(text) {
            if (ctx.font) ctx.mozTextStyle = ctx.font;
            var width = ctx.mozMeasureText(text);
            return { width: width };
        };
    }
    // * Setup html5MeasureText
    if (ctx.measureText && !ctx.html5MeasureText) {
        ctx.html5MeasureText = ctx.measureText;
        ctx.measureText = function(text) {
            var textMetrics = ctx.html5MeasureText(text);
            // fake it 'til you make it
            textMetrics.ascent = ctx.html5MeasureText("m").width;
            return textMetrics;
        };
    }
    // * for other browsers, no-op away
    if (!ctx.fillText) {
        ctx.fillText = function() {};
    }
    if (!ctx.measureText) {
        ctx.measureText = function() { return 10; };
    }
    return ctx;
}

注意：到 Opera 9.5 为止，Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后，开始来写我们的第一个 Canvas 程序，闻名的 HelloWorld 的又一个分支“Hello, Canvas”：

<canvas id="screen" width="400" height="400"></canvas><script type="text/javascript">(function() {    var canvas = document.getElementById("screen");    var ctx = fixContext(canvas.getContext("2d"));    ctx.font = "20pt Arial";    ctx.fillText("Hello, Canvas!", 20, 20);    ctx.fillText("www.xujiwei.com", 20, 50);    function fixContext(ctx) {        // * upgrade Firefox 3.0.x text rendering to HTML 5 standard        if (!ctx.fillText && ctx.mozDrawText) {            ctx.fillText = function(textToDraw, x, y, maxWidth) {                ctx.translate(x, y);                ctx.mozTextStyle = ctx.font;                ctx.mozDrawText(textToDraw);                ctx.translate(-x, -y);            };        }        // * Setup measureText        if (!ctx.measureText && ctx.mozMeasureText) {            ctx.measureText = function(text) {                if (ctx.font) ctx.mozTextStyle = ctx.font;                var width = ctx.mozMeasureText(text);                return { width: width };            };        }        // * Setup html5MeasureText        if (ctx.measureText && !ctx.html5MeasureText) {            ctx.html5MeasureText = ctx.measureText;            ctx.measureText = function(text) {                var textMetrics = ctx.html5MeasureText(text);                // fake it 'til you make it                textMetrics.ascent = ctx.html5MeasureText("m").width;                return textMetrics;            };        }        // * for other browsers, no-op away        if (!ctx.fillText) {            ctx.fillText = function() {};        }        if (!ctx.measureText) {            ctx.measureText = function() { return 10; };        }        return ctx;    }})();</script>

运行示例，Canvas 对象所在区域显示出“Hello, World!”，这正是代码中 ctx.fillText("Hello, World!", 20, 20); 的作用。

fillText 以及相关属性

fillText 方法用来在 Canvas 中显示文字，它可以接受四个参数，其中最后一个是可选的：

void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);

其中 maxWidth 表示显示文字时最大的宽度，可以防止文字溢出，不过我在测试中发现在 Firefox 与 Chomre 中指定了 maxWidth 时也没有任何效果。

在使用 fillText 方法之前，可以通过设置 Context 的 font 属性来调整显示文字的字体，在上面的示例中我使用了“20pt Arial”来作为显示文字的字体，你可以自己设置不同的值来看具体的效果。

结束

暂时就到这里了，我会一边看规范一边写这个系列：）