<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>
