Javascript Image() 不加载或绘制
Javascript Image() doesn't load or draw
我正在尝试创建一个简单的精灵类以用于画布游戏,但是我在创建该类的新实例时指定的图像永远不会调用onload或onerror。发生了什么,我如何让它加载和绘制图像?
下面是脚本:
var cvs = document.getElementById("c");
var ctx = cvs.getContext("2d");
var imagesToLoad = 1 ;
var imagesLoaded = 0;
var gameState = 0;
//START OF IMAGE STUFF//
function imageOnload() {
imagesLoaded+=1;
console.log("Images: loaded "+imagesLoaded+" overall.");
}
function loadLoop() {
if (imagesLoaded == imagesToLoad) {
gameState = 1;
}
}
function loop1() {
ctx.drawImage(circle.image);
}
function gameLoop() {
if(gameState==0){
loadLoop();
}
if(gameState==1){
loop1();
}
}
function Sprite(positionsArray){
this.x = positionsArray[0];
this.y = positionsArray[1];
this.dx = positionsArray[2];
this.dy = positionsArray[3];
this.angle = positionsArray[4];
this.rotating = positionsArray[5];
};
circle = new Sprite(new Array(0, 0, 0, 0, 0, 0));
circle.image = new Image().onload="imageOnload()".src="circle.png".onerror="console.log('"Nope.'")";
console.log("circle?");
setInterval(function(){gameLoop()}, 10);
//END OF IMAGE STUFF//
更正
:
- 图像上没有引号.onload 函数定义
- 图像上没有括号。onload 函数定义
- image.onerror 需要函数定义或匿名函数
- 将 image.onerror 放在 image.src 之前
下面是一些示例代码:
circle.image=new Image();
circle.image.onload=imageOnLoad;
circle.image.onerror=function(){console.log("Image failed to load")};
circle.image.src="koolaidman.png";
function imageOnLoad(){
ctx.drawImage(circle.image,0,0); // or do other stuff
}
相关文章:
- 绘制(重新加载)具有cors=“”的图像;匿名的“;在画布上(javascript)
- ajax加载()后,包含图表的图像不会重新绘制
- 仅在加载Google Web字体后绘制到画布
- 我无法在加载图像的画布上绘制
- 如何在画布上绘制(使用鼠标/触摸)、保存绘制的对象、存储、加载和操作
- 图片未绘制在“;重新加载页面”;
- 用一个加载项绘制图像阵列
- 加载带有 onload 的图像数组,如何限制将它们绘制到画布
- Javascript - 加载GIF冻结,同时将图像绘制到画布(Phonegap/Cordova)
- Javascript,如何加载,绘制和循环120帧
- 预绘制拉斐尔屏幕,将它们保存到文件并在运行时加载
- HTML5,在加载时将像素渲染为图像,以加快绘制时间
- Javascript Image() 不加载或绘制
- HTML5 画布:加载时绘制的贝塞尔曲线
- 如何加载新图像并将其绘制到画布上
- 如何在不重新绘制绑定视图的情况下重新加载angularjs范围数据
- 第一次加载时绘制到画布失败.刷新后就可以工作了
- Flot:当试图在页面加载时绘制图形时,会弹出一个奇怪的错误
- 一个预加载图像的函数-现在需要绘制它们,但如何绘制
- XDomainRequest可以用来加载和绘制图像吗?