<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> </head> <body style="width:100%; height:100%;"> 图片： <img id="qq" width="200" height="auto" src="Images/timg (2).jpg" /> 画布： <canvas id="test" width="600" height="360">您的浏览器不支持 HTML5 canvas 标签。</canvas><br /> 画布： <canvas id="test2" width="600" height="360">您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> //图片填充1 var test = document.getElementById("test"); var testC = test.getContext("2d"); window.onload = function () { var img = document.getElementById("qq"); var pat = testC.createPattern(img, "no-repeat"); testC.fillStyle = pat; testC.fillRect(30, 30, 480 + 30, 240 + 30); } //注：由于360极速模式下图片是异步加载的，因此需要onload去兼容360浏览器极速模式 //图片填充2 var test2 = document.getElementById("test2"); var testC2 = test2.getContext("2d"); var img2 = new Image(); img2.onload = function () { var pat = testC2.createPattern(img2, "no-repeat"); testC2.fillStyle = pat; testC2.fillRect(30, 30, 480 + 30, 240 + 30); } img2.src = "Images/timg (2).jpg"; //注：img预加载模式下，onload应该放在为src赋值的上面，以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生 </script> </body> </html>
原文：http://www.cnblogs.com/leona-d/p/6361390.html