html5绘制字符串

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> 绘制文字串</title>
</head>
<body>
    <canvas id="myCanvas" width="700" height="500" style="border:3px dashed #0094ff;"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
          ctx.fillStyle = "#f00";
          ctx.font = "italic 50px 黑体"
          ctx.textBaseline="top";
          ctx.fillText("填充绘制字符串", 0, 0);

          ctx.strokeStyle = "#ccc";
          ctx.font = "italic 50px 黑体";
          ctx.textAlign = "start";//设置绘制字符串水平对齐方式，该属性支持start/end/left/right/center
          ctx.strokeText("绘制字符串边框", 0, 50);

</script>
</body>
</html>