Вот как impliment хорошая идея Дейва использования массивов для организации холстов:
Создать массив, который будет содержать ссылки на все ваши 25 холстов (сделать то же самое для 25 контекстов)
var canvases=[];
var contexts=[];
Далее заполнить массив со всеми своими полотнами и контекстах:
for(var i=0;i<25;i++){
var canvas=document.getElementById("can"+(i<10?"0":""));
var context=canvas.getContext("2d");
canvases[i]=canvas;
contexts[i]=context;
}
Если вы еще не видели его раньше : i<10?"0":"" является встроенным if/else, используемым здесь для добавления начального нуля к вашим сайтам с более низким номером.
Тогда вы можете получить ваши «can05» холст, как это:
var canvas=canvases[4];
Почему 4 и не 5? Массивы основаны на нуле, поэтому холсты [0] имеют значение can01. Поэтому элемент 4 массива содержит ваш 5-й холст «can05».
Таким образом, вы можете принести рисунок контекст для «can05», как это:
var context=contexts[4];
Как говорит Дейв, «Evals зло», так вот, как извлечь контекст для «can05» и рисовать камень изображение на нем.
var context=contexts[4];
context.drawImage(stoneImage,0,0);
Этого камень рисунок может быть сокращен до:
contexts[4].drawImage(stoneImage,0,0);
Вы даже можете поместить этот сокращенный код в функцию для легкого повторного использования и модификации:
function reImage(canvasIndex, newImage){
contexts[ canvasIndex ].drawImage(newImage,0,0);
}
Тогда вы можете изменить на любой из ваших полотен, позвонив по функции:
reimage(4,stoneImage);
Вот и все!
Злые евреи были побеждены (предупреждение: никогда не приглашайте их на свой компьютер!)
Вот пример код и Fiddle: http://jsfiddle.net/m1erickson/ZuU2e/
Этот код создает 25 холстов динамически, а не жесткие кодирование элементы холста 25 HTML.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:0px; margin:0px;border:0px; }
canvas{vertical-align: top; }
</style>
<script>
$(function(){
var canvases=[];
var contexts=[];
var grass=new Image();
grass.onload=function(){
// the grass is loaded
// now make 25 canvases and fill them with grass
// ALSO !!!
// keep track of them in an array
// so we can use them later!
make25CanvasesFilledWithGrass()
// just a test
// fill canvas#3 with gold
draw(3,"gold");
// fill canvas#14 with red
draw(14,"red");
}
//grass.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/grass.jpg";
//grass.src="grass.jpg";
function make25CanvasesFilledWithGrass(){
// get the div that we will fill with 25 canvases
var container=document.getElementById("canvasContainer");
for(var i=0;i<25;i++){
// create a new html canvas element
var canvas=document.createElement("canvas");
// assign the new canvas an id, width and height
canvas.id="can"+(i<10?"0":"")+i;
canvas.width=grass.width;
canvas.height=grass.height;
// get the context for this new canvas
var ctx=canvas.getContext("2d");
// draw the grass image in the new canvas
ctx.drawImage(grass,0,0);
// add this new canvas to the web page
container.appendChild(canvas);
// add this new canvas to the canvases array
canvases[i]=canvas;
// add the context for this new canvas to the contexts array
contexts[i]=ctx;
}
}
// test -- just fill the specified canvas with the specified color
function draw(canvasIndex,newColor){
var canvas=canvases[canvasIndex];
var ctx=contexts[canvasIndex];
ctx.beginPath();
ctx.fillStyle=newColor;
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fill();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="canvasContainer"></div>
</body>
</html>
Это яркий пример «eval is evil». Переформатируйте свой код, чтобы он не использовал 'eval', и вы найдете это * намного проще. – Dave
hint: 'window ['name']' == 'name', но вы также можете использовать массив (что было бы лучше) – Dave