代码之家 › 专栏 › 技术社区 › EddieC

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

html5

3

EddieC · 技术社区 · 15 年前

我正尝试按照下面的示例将位图加载到画布中 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>

当我查看页面时,浏览器中不会绘制任何内容。未给出错误。请告诉我我做错了什么。谢谢!

3 回复 | 直到 11 年前

1

2

erikvold 11 年前

我想我应该回答这个问题,这样我才能结束它。这就是它所说的 meta.stackoverflow.com

好的,我在draw()之后忘记了分号;canvas id应该是“canvas”而不是“graph”。解决了我自己的问题。=)我现在感觉很聪明。=)谢谢大家的帮助。–Eddiec 2分钟前编辑。

2

1

Pekka 15 年前

我没有经验 Canvas ,但如果支持BMP文件,我会很惊讶…尝试使用JPG、PNG或GIF文件,所有浏览器都可靠支持这些文件。

3

0

GrandmasterB 15 年前

如果它不是与其他文章相关的位图…您确定img.src是文件的有效路径吗?