canvas Seven 文字

2017-04-12 本文已影响16人尤樊容

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>

效果图：