Loading

Canvas文本绘制

文字绘制；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>text</title>
</head>

<body>
    <canvas id='myCanvas' width='800' height='400'>
        your browser does not support canvas
    </canvas>
    <script type="text/javascript">
    var c = document.getElementById('myCanvas');
    var cxt = c.getContext('2d');
    cxt.beginPath();
    cxt.font = '30px Arial';
    var txt = 'Hello World';
    cxt.fillText(txt, 100, 50);
    cxt.strokeStyle = 'red';
    cxt.moveTo(100, 50); // 字体坐标是左下角坐标
    cxt.lineTo(300, 50);
    cxt.moveTo(100, 20); // 字体30px不是30像素
    cxt.lineTo(300, 20);
    cxt.font = '30pt Arial';
    cxt.strokeText(txt, 280, 50); // 字体30pt是30像素

    cxt.fillText(txt, 100, 100, 50); // 整个文本宽度50px
    cxt.moveTo(100, 100);
    cxt.lineTo(150, 100); // 文本宽度是50像素
    cxt.stroke();

    // 文本对齐的方式
    cxt.moveTo(100, 150);
    cxt.lineTo(200, 150);
    cxt.moveTo(100, 130);
    cxt.lineTo(200, 130);
    cxt.moveTo(100, 170);
    cxt.lineTo(200, 170);
    cxt.moveTo(150, 120);
    cxt.lineTo(150, 180);
    cxt.stroke();
    cxt.font = '40pt Arial'; // '40pt Courier New'的字体高度与Arial不一样
    cxt.textAlign = 'center'; //center,end,left,right,start
    cxt.textBaseline = 'middle'; //alphabetic,bottom,hanging,ideographic,middle,top
    cxt.fillText('A', 150, 150);
    </script>
</body>

</html>

 

posted @ 2015-07-22 14:56  stono  阅读(433)  评论(0)  编辑  收藏  举报