1、渲染文字：

  1. <style>
  2.     canvas {
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12.     var canvas = document.getElementById("can");
  13.     var ctx = canvas.getContext("2d");
  15.    ctx.beginPath();
  16.    ctx.strokeRect(0,0,200,200);
  17.    ctx.font = "30px Georgia";//font大小对俩都有作用
  18.    ctx.strokeText("panda",200,100);//文字描边：空心字
  19.    ctx.fillStyle = "red";
  20.    ctx.fillText("monkey",200,300);//文字填充：fillStyle对他有用，相当于普通文字，实体字
  22. </script>
  23. </body>