Mar*_*son 8 javascript canvas image
如何从服务器获取图像？
我有一些代码允许我在画布上绘制一些图像.
<html>
<head>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');
for (i=0;i<document.images.length;i++){
ctx.drawImage(document.images[i],i*150,i*130);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canv" width="1024" height="1024"></canvas>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif">
<img src="http://l.yimg.com/a/i/ww/beta/y3.gif">
<img src="http://static.ak.fbcdn.net/images/welcome/welcome_page_map.png">
</body>
</html>
我想继续从服务器上获取图像,而不是循环遍历document.images.
for (;;) {
/* how to fetch myimage??? */
myimage = fetch???('http://myserver/nextimage.cgi');
ctx.drawImage(myimage, x, y);
}
Eri*_*ver 22
使用内置的JavaScript Image对象.
以下是使用Image对象的一个非常简单的示例:
myimage = new Image();
myimage.src = 'http://myserver/nextimage.cgi';
从这个答案的评论中,这是一个更适合您的场景的机制.
谢谢olliej!
值得注意的是,您无法同步请求资源,因此您应该按照以下方式执行以下操作:
myimage = new Image();
myimage.onload = function() {
ctx.drawImage(myimage, x, y);
}
myimage.src = 'http://myserver/nextimage.cgi';
如果你想将图像绘制到画布上,你还需要等待图像实际加载,所以正确的做法是:
myimage = new Image();
myimage.onload = function() {
context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';
| 归档时间： |
|
| 查看次数： |
29736 次 |
| 最近记录： |