我在for循环中自动填充25个画布元素时遇到问题。它们的编号方式如下：can01至can25。
我已经尽力在画布上绘制不同的图像，并且花了很多时间搜索有关此问题的几篇文章，但没有找到任何文章。
这是我的工作代码，用相同的图像填充所有画布元素：
var imageGrass = new Image();
imageGrass.src = 'recources/imagesBG/grass.jpg';
imageGrass.onload = function() {
for (var i = 1; i < 26; i++)
{
if( i < 10 )
{
var task = "can0" + i + "_ctx.drawImage(imageGrass, 0, 0);";
eval(task);
}
else
{
var task = "can" + i + "_ctx.drawImage(imageGrass, 0, 0);";
eval(task);
}
}
}
但是我真的不知道如何使
imageGrass.src动态。例如，canvas元素编号。 5（can05）在这种情况下应看起来像石头纹理。我非常期待阅读您的想法。我就是不明白。
最佳答案
以下是暗含Dave使用数组组织画布的好主意：
创建一个数组，其中包含对所有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？数组是从零开始的，因此canvas [0]包含can01。因此，数组元素4包含您的第5个画布“ can05”。
因此，您可以像这样为“ can05”获取绘图上下文：
var context=contexts[4];
正如Dave所说，“小品是邪恶的”，因此，这里介绍了如何获取“ 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 );
而已！
邪恶的恶魔已经被击败（警告：永远不要再邀请他们进入您的计算机！）
这是示例代码和小提琴：http://jsfiddle.net/m1erickson/ZuU2e/
此代码动态创建25个画布，而不是对25个html canvas元素进行硬编码。
<!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>
关于javascript - 动态 Canvas DrawImage函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16886682/