canvas Seven 文字

作者: 尤樊容 | 来源:发表于2017-04-12 16:58 被阅读16次

canvas Seven 文字
HTML5中canvas使用
自定义View drawText()绘制文字
(17.05.26)(46)canvas的弧形、文字、线性/径向
canvas文字
canvas进阶
Canvas绘制文字、设置阴影、创建路径绘制矩形和圆
android text 绘制
canvas基础知识总结
自定义view 简单实现歌词的播放效果

canvas可以画图，也可以写文字，下面是文字的相关用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: #000;
        }
        canvas{
            background:#fff;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            var oC = document.getElementById("canvas1");
            var gd = oC.getContext("2d");

            gd.strokeStyle = "green";
            gd.fillStyle = "orange";
            gd.font = '50px 黑体';
            gd.strokeText("文字边框",200,200);
            //文字填充加边框
            gd.fillText("文字填充",200,300);
            gd.strokeText("文字填充",200,300);

        },false);
    </script>
</head>
<body>
<canvas id="canvas1" width="600" height="500">
    浏览器需要更新！！！
</canvas>
</body>
</html>

效果图：

Paste_Image.png

<script>
        document.addEventListener("DOMContentLoaded",function(){
            var oC = document.getElementById("canvas1");
            var gd = oC.getContext("2d");

            //文字水平对齐
            gd.textBaseline = 'top';
            //文字垂直对齐
            gd.textAlign = 'right';
            gd.strokeStyle = "green";
            gd.fillStyle = "orange";
            //字体属性
            gd.font = '50px 宋体';
            gd.fillText("文字位置",200,300);
            gd.strokeText("文字位置",200,300);

            //画横线
            gd.beginPath();
            gd.lineWidth = 1;
            gd.strokeStyle = "black";
            gd.moveTo(0, 300);
            gd.lineTo(oC.width, 300);
            gd.stroke();
            //画竖线
            gd.beginPath();
            gd.moveTo(200, 0);
            gd.lineTo(200, oC.height);
            gd.stroke();

        },false);
    </script>

效果图：