HTML5-Canvas绘图字符串

来源：互联网发布：centos 搭建svn服务器编辑：程序博客网时间：2024/05/16 06:01

HTML5-Canvas绘制字符串

CanvasRenderingContext2D对象，为绘制文字提供了以下两个方法：

fillText(String text,float x,float y,[float maxwidth]):填充字符串strokeText(String text,float x,float y,[float maxwidth])：绘制边框font="bold 45px宋体"textAlign：设置绘制字符串的水平对齐方式,start|end|right|centertextBaseAlign：垂直对齐方式：top|hanging|middle|alphabetic|bottom

index.html

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body onload="init()">        <canvas id="can" width="1200" height="300" style="border:1px solid red;"></canvas>        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>        <script type="text/javascript">        function init(){            var can = document.getElementById("can");            var ctx = can.getContext("2d");            // 实心的字体            // 对齐            ctx.textAlign = "start"            ctx.fillStyle = "#369"            ctx.font = "34px 微软雅黑";            ctx.fillText("大家好",100,150);            // 空心的字体            ctx.strokeStyle = "#369"            ctx.font = "44px bold 微软雅黑";            ctx.strokeText("大家好",100,250);        }        </script>    </body></html>

0 0