如何将位图文件加载到HTML5的画布(Canvas)中

Question

如何将位图文件加载到HTML5的画布(Canvas)中

4

我正在尝试按照这里的示例将位图加载到画布中。

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>HTML 5 Reports</title>
    <script type="text/javascript">
     function draw() {  
      var ctx = document.getElementById('canvas').getContext('2d');  
      var img = new Image();  
      img.onload = function(){  
       ctx.drawImage(img,0,0);  
       ctx.beginPath();  
       ctx.moveTo(30,96);  
       ctx.lineTo(70,66);  
       ctx.lineTo(103,76);  
       ctx.lineTo(170,15);  
       ctx.stroke();       }  
      img.src = 'worldmap1.bmp';  
    }  
    </script>
</head>
<body onload="draw()">
    <canvas id="graph"></canvas>
</body>
</html>

当我查看页面时，浏览器中没有绘制任何内容。没有错误提示。请告诉我我做错了什么。谢谢！

- EddieC

好的，我忘记在draw()后面加上分号了；canvas的id需要改为“canvas”，而不是“graph”。问题已解决=）我现在感觉很聪明=）谢谢大家的帮助。 - EddieC

3个回答

1

我对Canvas没有经验，但如果支持BMP文件，我会感到惊讶...尝试使用JPG、PNG或GIF文件，这些格式在所有浏览器中都得到了可靠的支持。

- Pekka

现在我已经尝试了使用png和gif文件，但都没有成功。由于它也没有绘制线条，我认为我做错了更基本的事情。 - EddieC

0

如果这与位图无关，根据其他帖子...您确定img.src是文件的有效路径吗？

- GrandmasterB

我尝试了完整的路径，但效果并不好。它也没有绘制出代码中所示的线条。 - EddieC

如果我只是使用 <img src="worldmap1.jpg"> 将图像插入到 HTML 正文中，它会显示图像，因此我不认为这与路径有关。 - EddieC

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- EddieC · Accepted Answer

我想我应该回答这个问题，这是在meta.stackoverflow.com上看到的。

好的，我忘记在draw()后加上分号了，并且canvas的id需要改为“canvas”，而不是“graph”。我解决了自己的问题=）现在感觉很聪明=）谢谢大家的帮助。- EddieC 2分钟前编辑。