[英]How can I use an image on an HTML5 canvas without previously having an image on the page?
在W3 Schools HTML5 Canvas Image Page 上,他们在加载画布之前在页面上使用<img>
标签。 他们的代码如下。
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
</script>
我有一张地图(作为图像)已加载到我需要使用的服务器上,但我找不到一种方法在画布上只显示一个图像。 例如... 左边的是我正在使用的图像,但我需要它来让右边的(画布)工作。
有小费吗?
如果您知道图像的路径,或者可以提供它,则可以使用以下内容来创建图像。 重要的是要注意加载图像确实需要时间,并且在加载之前您无法成功使用该图像。
window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.createElement("img"); img.onload = function() { ctx.drawImage(img, 10, 10); } // triggers onload event (after it loads of course) img.src = "//via.placeholder.com/350x150"; }
<p>Canvas:</p> <canvas id="myCanvas" width="370" height="170" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.