canvas背景图片平铺 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{background: black;}
            #c1{background: wheat;}
        </style>
        <script>
            window.onload=function(){
            
                    var oc=document.getElementById('c1');
                    var gc=oc.getContext('2d');
                    var yimg=new Image();
                    yimg.onload=function(){
                        draw(this);
                    };
                    yimg.src="img/02.jpg";
                    function draw(obj){
                        var bg=gc.createPattern(obj,'repeat');
                        gc.fillStyle=bg;
                        
                        gc.fillRect(0,0,600,600);
                    }
            };
        </script>
    </head>
    <body>
     <canvas id="c1" width="800" height="800"></canvas>
    </body>
</html>

 

posted @ 2018-12-02 15:22  A-zero  阅读(3201)  评论(0)    收藏  举报