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

 

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6361390.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接

 

posted @ 2017-02-02 17:25  YanEr、  阅读(3663)  评论(0)    收藏  举报