HTML5之8__Canvas文本

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

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

为了保证文本在各浏览器下都能正常显示, Canvas API 为context 提供了类似于CSS 的属性，以此来保证实际显示效果的高度可配置.

以上就是HTML5之8 __Canvas 文本的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于HTML5之8__Canvas文本的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did65648

更新时间：2022-10-13 阅读：74次