html5 畫布背景圖片載入不出來
阿新 • • 發佈：2020-08-29
<!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>