gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:17:51 25 4
gpt4 key购买 nike

我正在尝试按照示例 here. 将位图加载到 Canvas 中

这是我的代码:

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

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

最佳答案

我想我应该回答这个问题,这样我就可以关闭它了。这就是它在 meta.stackoverflow.com 上似乎所说的

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

关于html - 如何将位图文件加载到 HTML5 的 Canvas 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3435528/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com