從計算機在畫布上繪制圖像

Question

我正在嘗試做我的第一場比賽。 當然，我正在嘗試制作背景圖像。 我正在通過鏈接和DrawImage（）使用此對象； 功能在屏幕上繪制我的圖像。

  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

這樣可以達到預期的效果，我可以在屏幕上加載圖像，但是由於它是鏈接，因此我必須在線才能加載圖像。

我嘗試用文件路徑替換該鏈接，但是a，它不起作用。

有沒有一種方法可以將圖像文件從計算機加載到Canvas，而不是聯機運行該程序？

任何幫助將非常感激。

謝謝！

-鐵猿

Answer 1

是。 您只需要將圖像放在同一目錄中即可（或者您需要找到它的路徑）。 例如，如果我們這樣設置目錄：

myFile.html
myImage.jpg

然后，您可以執行以下操作：

imageObj.src = 'myImage.jpg';

或者說，例如，您有一個圖像目錄： imgs 。

myFile.html
imgs
 -> myImage.jpg   

然后，您可以執行以下操作：

imageObj.src = 'imgs/myImage.jpg';

Answer 2

只需使用相對路徑。 例如，如果您下載該圖像並將其保存在與html相同的目錄中，那么它將起作用：

imageObj.src = 'darth-vader.jpg';

另一個示例，假設它在images目錄中，那么它將起作用：

imageObj.src = 'images/darth-vader.jpg';

等等...您只需要指定相對於您要從中調用文件的圖像的正確路徑。