canvas纹理着色-扩展

最新推荐文章于 2023-08-12 17:00:24 发布

书院二层楼

最新推荐文章于 2023-08-12 17:00:24 发布

阅读量199

点赞数

分类专栏： canvas JS 文章标签： canvas createPattern

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109513685

版权

JS 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

canvas

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas纹理着色-扩展</title>
    <style>
        html, body {margin: 0;height: 100%;}
        #rect {width: 100%;height: 100%;}
    </style>
</head>
<body>
    <div id="rect">
        <canvas id="test"></canvas>
        <script>
            const rect=document.getElementById('rect');
            const cvs=document.getElementById('test');
            const {clientWidth,clientHeight}=rect;
            cvs.width=clientWidth;
            cvs.height=clientHeight;
            const ctx=cvs.getContext('2d');
        
            //创建地板和瓷砖Image对象
            const floor=new Image();
            floor.src='./images/floor.jpg';
            const tile=new Image();
            tile.src='./images/tile.jpg';
        
            //当所有图片都加载成功后再绘图
            Promise.all([imgPro(floor),imgPro(tile)]).then(()=>{
                //绘图方法
                draw();
            });
            //建立Promise 对象，指定img 加载成功后，执行resolve
            function imgPro(img){
                return new Promise((resolve)=>{
                    img.onload=function(){
                        resolve(img);
                    }
                });
            }
        
            //绘图方法
            function draw(){
                //纹理对象
                const  ptf=ctx.createPattern(floor,'repeat');
                const  ptt=ctx.createPattern(tile,'repeat');
                ctx.fillStyle=ptf;
                ctx.strokeStyle=ptt;
                //描边宽度
                ctx.lineWidth=10;
                //绘图
                ctx.fillRect(0,0,clientWidth,clientHeight);
                ctx.strokeRect(0,0,clientWidth,clientHeight);
            }
        
        
        </script>
    </div>
    
</body>
</html>