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 圖片延時加載，包含背景圖片微信小程序使用本地圖片做背景圖，展示不出來