html5 画布背景图片加载不出来

本文转载自查看原文 2020-08-29 14:59 535

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 canvas 设置背景图</title>
        <script src="canvas2image.js"></script>
    </head>
    <body>
        <canvas id="canvaxbox" width="500" height="500"></canvas>
    </body>
    <script>
        var c = document.getElementById("canvaxbox");
        var canvas = c.getContext("2d");
        var img = new Image();
        img.src = "pg1.JPG";
        img.onload = imgfn;//图片加载完在执行
        function imgfn() {
            var bg = canvas.createPattern(img, "no-repeat");//createPattern() 方法在指定的方向内重复指定的元素。
            canvas.fillStyle = bg;//fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
            canvas.fillRect(0, 0, c.width, c.height);//绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)
        }
    </script>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 【vue】添加背景图片，背景图片显示不出来的问题 html5 填充背景图片 vue+webpack项目打包后背景图片加载不出来问题解决基于html5背景图片自适应代码 HTML如何添加背景图片 html背景图片设置 html中添加背景图片 html背景图片无法显示 picLazyLoad 图片延时加载，包含背景图片微信小程序使用本地图片做背景图，展示不出来