如何將圖像設置爲<canvas>背景

我正在研究一個項目，該項目在表格下方有一個表格和畫布字段。如何將圖像設置爲<canvas>背景

我需要把其中一個圖片作爲背景，這在我的情況tshirt.png。

直到現在我已經完成了以下工作。我有兩個文件（index.html的&的jquery.js）

指數

<html> 
    <head> 
<script src="js/jQuery.js"></script> 
</head> 
    <table border="1"> 
     <tr> 
    <td>#</td> 
    <td>filename</td> 
    <td>x</td> 
    <td>y</td> 
    <td>z</td> 
     </tr> 

<tr> 
    <td>1</td> 
    <td><img src="images/sheep.png" width="40px" height="40px"></img></td> 
    <td><input type="text" value="" name="x"></td> 
    <td><input type="text" value="" name="y"></td> 
    <td><input type="text" value="" name="z"></td> 
</tr> 
<tr> 
    <td>2</td> 
    <td><img src="images/tshirt.png" width="40px" height="40px"></td> 
    <td><input type="text" value=""></td> 
    <td><input type="text" value=""></td> 
    <td><input type="text" value=""></td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>item.png</td> 
    <td><input type="text" value=""></td> 
    <td><input type="text" value=""></td> 
    <td><input type="text" value=""></td> 
    </tr> 
    </table> 

    <section id="main"> 
    <canvas id="canvas" width="1024" height="768" style="border:1px solid red;">  
    </canvas> 
    </section> 
</html>

的jquery.js

function doFirst(){ 
    var x = document.getElementById('canvas'); 
    canvas = x.getContext('2d'); 

    var pic = new Image(); 
    pic.src = "images/sheep.png"; 
    pic.addEventListener("load", function() { canvas.drawImage(pic,0,0,100,200)}, false); 

    var background = new Image(); 
    background.src = "images/tshirt.png"; 
    background.addEventListener("load",function(){ 
     canvas.drawImage(background,0,250,200,300)}, false); 
    } 
    window.addEventListener("load", doFirst, false);

歡迎任何幫助

來源

2013-02-19 Haris Hajdarevic

你爲什麼不使用CSS背景？ – cIph3r 2013-02-19 19:31:00

我的情況如何？如果你可以寫代碼，我會非常感激？ – 2013-02-19 19:34:26

我不知道你的情況如何，因爲你的意圖不明確，你想在這裏做什麼..你知道如何在CSS中設置背景嗎？ – cIph3r 2013-02-19 19:37:38

畫布肯定需要一個不同的心態和方法，但有時記住退後一步，想一個更簡單的方法，這將有助於過度設計你的代碼。

只需使用CSS定義背景

background: url("images/tshirt.png");

這裏是你如何設置它在JavaScript via jQuery from a previous post

來源

2013-02-19 20:07:43 afreeland

這不會解決我的問題。這個項目是這樣的，例如我會有一張桌子，上面擺着一排排綿羊和襯衫。每行將有座標x，y，z。如果我更改了表格中t恤（背景）或sheep.png的座標，將在畫布上移動。這就是我在項目結束時得到的結果。這樣你給我一個解決方案，如果我刪除： var background = new Image（）; background.src =「images/tshirt.png」; background.addEventListener（「load」，function（）{ canvas.drawImage（background，0,250,200,300）}，false）; 只需在css中寫入 background：url（「images/tshirt.png」）; – 2013-02-19 20:43:01

它不會顯示tshirt.png作爲背景。 – 2013-02-19 20:44:05

那麼你想爲每一行的圖像然後...例如...羊排有一個sheep.png的背景和襯衫的行有一個shirts.png的背景？桌子後面的畫布是？ – afreeland 2013-02-19 21:58:43

如何將圖像設置爲<canvas>背景

回答

相關問題