Question

我正在尝试按照示例here.

将位图加载到画布中

这是我的代码：

<!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>

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

Answer 1

我想我应该回答这个问题所以我可以关闭它。这就是它在meta.stackoverflow.com

上所说的内容

好的，我在画完（）后忘记了分号;和canvas id需要是“canvas”而不是“graph”。解决了我自己的问题=）我现在感觉很聪明=）感谢所有的帮助。 - EddieC 2分钟前编辑。

Answer 2

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

Answer 3

如果它的位图与其他帖子无关......你确定img.src是该文件的有效路径吗？

如何将位图文件加载到HTML5的Canvas中

3 个答案: