Javascript 一张画布上的多个图案
我想在一张画布上画多个图案。我可以使用回调函数加载多个图像，但当我尝试绘制模式时，什么都没有发生。在同一张画布上，可以看到墙壁的图案和屋顶的图案。但是在我的浏览器（mozilla）中打开html只会打开一个空白页面Javascript 一张画布上的多个图案,javascript,html,image,canvas,Javascript,Html,Image,Canvas,我想在一张画布上画多个图案。我可以使用回调函数加载多个图像，但当我尝试绘制模式时，什么都没有发生。在同一张画布上，可以看到墙壁的图案和屋顶的图案。但是在我的浏览器（mozilla）中打开html只会打开一个空白页面 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> EXAMPLE </title> </head>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> EXAMPLE </title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$.getJSON("example01.json", function(data) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = data.map.width;
canvas.height = data.map.height;
var count = 0;
for (property in data.map) {
count++;
}
var sources = new Array(count - 2);
var wallExist = data.map.wall.brick;
var roofExist = data.map.roof.tile;
if (typeof (wallExist) != "undefined") {
switch (data.map.wall.brick) {
case "01":
sources[0] = "./brick01.png";
break;
case "02":
sources[0] = "./brick02.png";
break;
}
}
if (typeof (roofExist) != "undefined") {
switch (roofExist) {
case "01" :
sources[1] = "./roof01.png";
case "02" :
sources[1] = "./roof02.png";
}
function loadImages(sources, callback) {
var images = new Array();
var loadedImages = 0;
var numImages = 0;
var patterns = new Array();
for (var src in sources) {
numImages++;
}
for (i = 0; i <= sources.length; i++) {
images[i] = new Image();
images[i].onload = function() {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[i].src = sources[i];
patterns[i] = ctx.createPattern(image[i], "repeat");
}
}
loadImages(sources, function(images) {
ctx.rect(data.map.wall.x_pos, data.map.wall.y_pos, data.map.wall.width, data.map.wall.height);
ctx.fill(pattern[0]);
ctx.rect(data.map.roof.x_pos, data.map.roof.y_pos, data.map.roof.width, dat.map.roof.height);
ctx.fill(pattern[1]);
});
}
});
例子
$.getJSON（“example01.json”，函数（数据）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
canvas.width=data.map.width；
canvas.height=data.map.height；
var计数=0；
for（data.map中的属性）{
计数++；
}
变量源=新数组（计数-2）；
var wallExist=data.map.wall.brick；
var rootexist=data.map.roof.tile；
if（类型（墙存在）！=“未定义”）{
开关（data.map.wall.brick）{
案例“01”：
来源[0]=“/brick01.png”；
打破
案例“02”：
来源[0]=“/brick02.png”；
打破
}
}
if（typeof（rootexist）！=“未定义”）{
开关（存在）{
案例“01”：
来源[1]=“/root01.png”；
案例“02”：
来源[1]=“/root02.png”；
}
函数loadImages（源、回调）{
var images=新数组（）；
var loadedImages=0；
var numImages=0；
var patterns=新数组（）；
用于（源中的var src）{
numImages++；
}
对于（i=0；i=numImages）{
回调（图像）；
}
};
图像[i].src=sources[i]；
patterns[i]=ctx.createPattern（图像[i]，“重复”）；
}
}
加载图像（源、函数（图像）{
ctx.rect（data.map.wall.x_pos、data.map.wall.y_pos、data.map.wall.width、data.map.wall.height）；
ctx.填充（模式[0]）；
ctx.rect（data.map.roof.x_pos、data.map.roof.y_pos、data.map.roof.width、dat.map.roof.height）；
ctx.填充（模式[1]）；
});
}
});
问题似乎是您正在执行模式[i]=ctx.createPattern（image[i]，“repeat”）当尚未加载相应图像时
另外，在loadImages
回调中，您正在访问一个不存在的pattern
数组（并且patterns
超出范围）。而fill（）
不将模式作为参数，但您需要先设置上下文的.fillStyle
属性
最后但并非最不重要的一点是，您已经将loadImages
函数声明及其调用放在if（rootexist）
子句中，它应该在它之后
为了好玩，我还重写了您的逻辑，不使用所有这些数组或对象，因为它们似乎有点不必要，因为您只是有条件地填充它们
function draw(ctx, item, prop, imgname) {
if (!item || !item[prop]) return; // abort, doesn't exist
var image = new Image();
image.onload = function() {
ctx.fillStyle = ctx.createPattern(image, "repeat");
ctx.rect(item.x_pos, item.y_pos, item.width, item.height);
ctx.fill();
};
image.src = imgname+item[prop]+".png";
}
$.getJSON("example01.json", function(data) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = data.map.width;
canvas.height = data.map.height;
draw(ctx, data.map.wall, "brick", "./brick");
draw(cty, data.map.roof, "tile", "./roof");
});
嗯，您已经在尚未加载的图像上执行了ctx.createPattern
。把它放回电话。