gpt4 book ai didi

javascript - Canvas 标签在 Webmatrix 中不起作用

转载 作者:行者123 更新时间:2023-11-28 01:17:44 24 4
gpt4 key购买 nike

我试图在webmatrix中执行此代码。但不知道为什么我没有得到结果。我得到的是原始图像,但不是 Canvas 中的图像。另外,我是 webmatrix 的新手。

这是我的代码:

<!DOCTYPE html>
<html>

<body>
<p>Image to use:</p>
<img id="scream" src="happy.png" alt="The Scream" width="220" height="277">
<p>Canvas</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
</body>

</html>

最佳答案

这不是 Web Pages 框架和 WebMatrix 的问题,而是 Canvas API 的问题。

在实例化drawImage()方法之前,代码必须等待图像加载。您可以通过使用图像对象的 onload 属性来完成此操作,如下例所示:

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function () {
ctx.drawImage(img, 10, 10);
}
</script>

关于javascript - Canvas 标签在 Webmatrix 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23648877/

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