canvas-圖案文字

<canvas id="canvas" width="500" height="300" style="border: 1px dashed gray;"></canvas>

<script type="text/javascript">
    function $$(id) {
      return document.getElementById(id);
    }

    window.onload = function () {
      var cnv = $$("canvas");
      var cxt = cnv.getContext("2d");
      
      //創建image對象
      var image = new Image();
      image.src = "images/bg2.jpg";
      image.onload = function () {
        var text = "愛上canvas";
        cxt.font = "bold 60px 微軟雅黑";
        var pattern = cxt.createPattern(image,"no-repeat");
        cxt.fillStyle = pattern;
        cxt.fillText(text,20,100);
      }
    }

</script>