html5 图片绘画-贴图

<canvas id="canvas3" width="250" height="300" style="background-color:black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="贴图" οnclick="Patterns();" />
<input type="button" value="清空" οnclick="ClearPatterns();" />
<script type="text/javascript">
//美女图的缩小版本
IMG_SRC_SMALL='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXwAAABMCAwABAAAAAQAAAGmHBAABAAAAcwAAAAAAAABBQ0QgU3lzdGVtcyDK/cLrs8nP8QAyMDEwOjEwOjA0IDE1OjM5OjU3AAUAAJAHAAQAAAAwMjIwkJICAAQAAAAyODEAAqAEAAEAAAAXAAAAA6AEAAEAAAAeAAAABaAEAAEAAAC1AAAAAAAAAAIAAQACAAQAAABSOTgAAgAHAAQAAAAwMTAwAAAAAAAAAAD//gAqSW50ZWwoUikgSlBFRyBMaWJyYXJ5LCB2ZXJzaW9uIDEsNSw0LDM2AP/AABEIAB4AFwMBIQACEQEDEQH/2wCEAAMCAgICAQMCAgIDAwMDBAcEBAQEBAkGBgUHCgkLCwoJCgoMDREODAwQDAoKDxQPEBESExMTCw4VFhUSFhESExIBBAUFBgUGDQcHDRsSDxIbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbG//EAIgAAAIDAQAAAAAAAAAAAAAAAAUGBwgJBBAAAQMDAgQBCgcBAAAAAAAAAQIDBAUGEQcSAAghMRMJFRYiQVRhcZGUFBcyUVWB0eEBAQEBAQAAAAAAAAAAAAAAAAYHBQQRAAEEAQAHCAMAAAAAAAAAAAEAAgMRBBITMVFhcYEFISIkMjNB8LHR4f/aAAwDAQACEQMRAD8AtfYlwW1qbYUkTNE4k2lUxDbVClQ58eYanDypKnkltYLbfjoeSUEk5T6w6jgNp7YGoz/MnXo1w2LaVJsJhC0UZMWoOGoNOJWnHiIUpQUhaSpQIxjABA7cc2LK+OYn6Vo5Fy4mqkcaGwbj+vhSTWNPLaZjeNNfpqADtxIl4P8AScDpwH9CrI97oX3H/eErc6au4noEUdhQ34gL4lVCrKh5N/nfmNWRIq9wW1eVCefg0qZODrkaW2vOCdoCkFRO4pCVbVZG5ScKbbEvOu8y/KzqDOra49Oq9Iq8avR/Msh4luGWdjrKXF+uQnIWc9Tk+zGJ7nSPjx3vb6qNc6P5pL5vZNbv6otqlFp8CMtlL0ybtIy2uSp109sqGTn58CPwkH+Eqf0X/vAeHtrOcyy4dUd1pGwJz5/zXa3ymWvcEugh5yLV5C5sx57wHQXUJUhtsfrUnc25lI6AAE9s8C/J8sah2TpTfGqFQsBNctmt0dwiSZhaciNoCwtsJ2HcHAUnuQPDPbPFBvyhdVn6UmkBLzupJV3XpT4lPkLDzfjIebjMpaG9SlbN6s46429vkeE/8wnv2e+3XxP8bBLo7KLFhtaQ6rW9pPq/XKZbWoVjIrMGjvprqmHlbW3HglSMkJPrdCcg4Cvb8TerWpkKwOUG4G7NoEeKmLT10+JF8JLccLWnYjKU9AhO7sAc9uKA0yNiJJSeRzaHAXzWW9VtqsrqjTPnCOXlxkokK2kJXs6dMDoSrrn4444/Q2r+/RvqvjKbjaLQEf0Sv//Z';
function Patterns(){
///获取画布对象
ctx = document.getElementById("canvas3").getContext("2d");
//创建图像对象
img=new Image();
//指定图像源
img.src=IMG_SRC_SMALL;
//图像被装入后触发
img.οnlοad=function(){
//创建图案
var ptrn = ctx.createPattern(img,'repeat');
//将图案设置为填充样式
ctx.fillStyle = ptrn;
//填充画布
ctx.fillRect(0,0,250,300);
}
}
function ClearPatterns(){
///获取画布对象
ctx = document.getElementById("canvas3").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
}
</script>