Javascript-Canvas图片填充之预加载

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body style="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>
作者：leona
原文链接：http://www.cnblogs.com/leona-d/p/6361390.html