在onload函數中設置畫布背景不起作用

我想寫在圖像的頂部。所以我試圖使用onLoad函數設置畫布對象的背景圖像。 drawImage（）在畫布上工作並繪製，但如果我嘗試設置畫布背景圖像，它不起作用。在onload函數中設置畫布背景不起作用

這工作

<script> 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 
    canvas.style.backgroundRepeat = "no-repeat"; 
    imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
    </script>

這不工作

<script> 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 
    canvas.style.backgroundRepeat = "no-repeat"; 
    imageObj.onload = function() { 
    canvas.style.backgroundImage = 'url('+imageObj+')'; 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
    </script>

來源

2013-12-07 animesh manglik

我如果你想設置CSS'background'屬性，不明白爲什麼你需要「繪製」任何東西？順便說一句，你需要將它設置爲'imageObj.src' ... – Bergi

你真的不能將圖像對象串聯到一個字符串中，並期望設置樣式。它必須是一個字符串。你當然可以做'url（'+ imageObj.src +'）';'但是這種做法違背了創建圖像對象的目的。 – adeneo

謝謝...我想要實現的是設置寬度的畫布並通過調整圖像大小來調整其高度。然後把圖像作爲背景 –

你不能在樣式使用一個對象，它必須是唯一的字符串：

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
var image = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg' 

canvas.style.backgroundRepeat = "no-repeat"; 
canvas.style.backgroundImage = 'url('+image+')';

來源

2013-12-07 20:45:59 adeneo

在onload函數中設置畫布背景不起作用

回答

相關問題