HTML5之8 __Canvas 文本

最新推荐文章于 2024-07-02 22:34:09 发布

109905418

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量975

点赞数

分类专栏： HTML5 HTML5程序设计

本文链接：https://blog.csdn.net/aduovip/article/details/45606633

版权

HTML5 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML5程序设计

14 篇文章 3 订阅

订阅专栏

canvas API 具有强大的文本功能，操作canvas 文本与操作其他路径对象的方式相同：可以描绘文本轮郭，填充文本内部。

context 对象的文本绘制由两个函数实现:

fillText(text, x, y, maxwidth); 填充

strokeText(text, x, y, maxwidth); 描绘轮郭

两个函数的参数：文本参数，以及用于指定文本位置的坐标参数， maxwidth 是可选参数, 用于限制字体大小, 将文本字体强制收缩到指定尺寸.

此外还有一个measureText() 函数，它会返回一个度量对象，其中包含了在当前context 环境下指定文本的实际显示宽度

在HTML5.js 源码定义为:

/**
@param {string} text
@return {TextMetrics}
*/
CanvasRenderingContext2D.prototype.measureText = function(text) {};

一个示例

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <title>Canvas 文本</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="300"> </canvas>
  <script>
        function drawTrails() {
            var canvas = document.getElementById('trails');
            var context = canvas.getContext('2d');
            // 在canvas 上绘制标题文本
            context.save();
            // 字号为60px,  字体为impact
            context.font = "60px impact";
            // 将文本填充为棕色
            context.fillStyle = '#996600';
            // 将文本设为居中对齐
            context.textAlign = 'center';
            // 在canvas顶部中央的位置
            // 以大字体的形式显示文本
            context.fillText('Happy Trails!', 200, 60, 400);
            context.restore();
        }
        window.addEventListener("load", drawTrails, true);
  </script>
</html>