在画布上绘制图像从计算机

Question

我正在尝试制作我的第一个游戏。当然，我正在尝试制作背景图片。我正在使用此对象与链接和DrawImage（）;用于在屏幕上绘制我的图像。

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

这给出了所需的结果，我可以在屏幕上加载图像，但我需要在线才能加载它，因为它是一个链接。

我尝试用文件路径替换链接，但是唉，它没有用。

有没有办法将图像文件从我的计算机加载到Canvas，而不是在线才能运行该程序？

非常感谢任何帮助。

谢谢！

-IronApe

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';

等等......您只需指定相对于您正在调用它的文件的图像的正确路径。