为什么我不能用画布画一幅画？
我试着在画布里放一幅画。但就是没有出现。我谷歌了一下，看看哪里出了问题。不幸的是，我还是解决不了。这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<link rel="stylesheet" href="mainStyle.css">
<body>
<div class="game-border">
<canvas id="gc"></canvas>
<script>
window.onload=function(){
var cnvs=document.getElementById("gc");
var ctx=cnvs.getContext("2d");
var img=new Image();
img.src="/img/road.jpg";
ctx.drawImage(img,0,0);
};
</script>
</div>
</body>
</html>
这是css文件
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.game-border{
display: flex;
justify-content: center;
justify-items: center;
}
#gc{
width: 100vmin;
height: 100vmin;
background-color: coral;
}
共有1个答案
如果在图像完成加载之前尝试调用drawImage()，它将不会执行任何操作。因此,您需要确保使用load事件,以便在映像加载之前不要尝试此操作：
var img = new Image(); // Create new img element
img.addEventListener('load', function() {
// execute drawImage statements here
ctx.drawImage(img,0,0);
}, false);
img.src = 'myImage.png'; // Set source path
来源:https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/using_images
-
我正在尝试用numpy、matplotlib和tkinter创建生活游戏。我计划首先询问用户游戏板上有多少行和列，以及一个单元格活产卵的概率。输入这些信息后，用户将按“生成”按钮开始游戏。但是，只要按下按钮，就会弹出错误：“AttributeError：‘numpy.ndarray’object has no attribute‘set\u canvas’”。我不知道为什么FigureCanvas
-
我试图创建一个自定义视图，工作简单：有一个位图显示由弧路径-从0deg到360deg。度随着一些fps而变化。 我的问题是--如何设置模式以使其工作透明？ 当然，是32位PNG，带有alpha通道。
-
在IE9画布中现在是否支持虚线/点线？目前我正在做与以下内容非常相似的事情： 这在IE7、IE8、IE9兼容模式和FireFox中工作很好，然而，在IE9和Chrome中，为每条虚线绘制一个实心笔画。 对为什么会发生这种情况有什么想法吗？
-
有没有可能用画布在Android中实现下面的图片？ 我想有一个洞，而不仅仅是在黄色的红色层上有一个圈。我在-method中使用以下代码进行了尝试（但失败了）： 但是当我使用这段代码时，它在两个位图上都开了一个洞。最后，这个应用程序应该是一个带有球、洞和其他东西的迷宫。当球掉进洞里时，它应该出现在红色位图下。有可能实现这一点吗？ 答： 如果有人也有同样的问题：使用View而不是SurfaceView
-
我的印象是，在JFrame上放置图形需要画布或JPanel，但我之前看到一个视频，其中一个人在扩展JFrame时使用绘画（graphics g），而没有制作面板或画布。如果是这样的话，为什么人们要费心制作画布或JPanel呢？
-
我找到了几个与此相关的问题和答案，但没有一个解决方案让我明白为什么这段代码不起作用： 我有一个tkinter窗口，其中动态生成了内容——这意味着如果屏幕上有两个或多个小部件要显示，则需要能够向下滚动。我希望能够用小部件填充框架“f”，然后使用画布。创建_window（）函数以可滚动方式显示它。 现在显示窗口，但滚动条未启用-类似于滚动区域不正确或滚动条与画布之间的链接不正确。