在画布中绘制数组图像
draw array images in canvas?
我试图在画布上绘制图像数组,但没有绘制!以下是我的代码!我也试图了解phonegap和javascriptindex . html:
<!DOCTYPE html>
<html>
<head>
<title>Minecraft Background Check</title>
</head>
<body>
<canvas id="mycanvas" style="position:fixed; top:0; left:0; border:1px solid #c3c3c3; width: 100%; height: 100%;"></canvas>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready",ondeviceReady,false);
function onDeviceReady () {}
//get element by id
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
//array image which need to draw in canvas
var image = ["img/image12","img/image13","img/image14","img/image15","img/image10"];
var m_arrImages = {};
for (var src in image) {
m_arrImages[src] = new Image();
m_arrImages[src].src = image[src];
}
var imagePositionsX = [20, 80, 140, 200, 260, 320, 380, 440, 500, 560];
var imagePositionsY = [20, 60, 100, 140, 180, 220, 260, 300, 340, 380];
var i, x, y;
for (i = 0; i < m_arrImages.length; i++) {
x = imagePositionsX[ Math.floor(Math.random()*10) ];
y = imagePositionsY[ Math.floor(Math.random()*10) ];
ctx.drawImage(m_arrImages[i], x, y, 50, 50);
}
</script>
</body>
</html>
您已经将函数ondeviceReady
设置为在deviceready
事件中运行,但该函数尚未定义。你已经定义了一个叫做onDeviceReady
的函数。Javascript变量和函数名是区分大小写的,所以在deviceready
事件中不会运行任何东西。
改变:
document.addEventListener("deviceready",ondeviceReady,false);
document.addEventListener("deviceready",onDeviceReady,false);
也许我错了,但是…"m_arrImages"-它只是数组与字符串,而不是图像,不是吗?
我想,应该是这样的:
var m_arrImages = {};
for (var src in image) {
m_arrImages[src] = new Image();
m_arrImages[src].src = image[src];
}
相关文章:
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- 在字符串中查找所有图像 src URL 并存储在数组中
- 在ListView中添加JSON数组中存储的图像-ReactNative
- JavaScript中的数组图像循环
- 循环以检查数组中的最后一个图像
- 如何从 URL 数组向文档添加图像列表
- 数组上的多图像上传-Javascript/Jquery
- Jquery/Javascript:通过按下按钮显示数组中的随机图像
- JavaScript:是否可以将图像/信息附加到数组项
- Javascript图像数组预加载速度和从内存中删除
- 将图像数组访问到动态表中
- Javascript检查图像是否在数组中
- Javascript图像数组
- 正在从字节数组加载图像内容
- Javascript:如何将SVG图像放入数组中
- JavaScript 在删除预上传图像时不清除图像数组
- 比较数组图像&值如果ok提交表单
- 画布图案饼图与数组图像
- Javascript数组(图像滑块)(Webkit中的bug ?)
- 在画布中绘制数组图像