Javascript - 在 canvas 上平铺多个图像
Javascript - Tile multiple images on canvas
我只是想并排加载 3 张不同的图像,但是当我 运行 以下代码时,它只绘制我多次推入 src[]
的最后一张图像。
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var tileWidth = 25;
var tileWCount = 3;
var multi = 2;
var src = [];
src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg");
src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg");
src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg");
for(var i=0; i < tileWCount; i++){
var img = new Image();
img.onload = (function(value){
return function() {
ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
}
})(i);
img.src = src[i];
}
}
我从 this Stack Overflow post 中提取了大部分代码。我可以将 src
设置为单个图像,但是当我尝试使用我的迭代器时,它开始失败。我确实注意到那里的答案是将 ctx.drawImage
与 src[value]
一起使用,但我无法用它绘制任何东西。
我完全不知道为什么会发生这种情况。
为了方便起见,我建立了一个 jsfiddle 项目:http://jsfiddle.net/fierstarter/jv0ko966/
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var tileWidth = 25;
var tileWCount = 3;
var multi = 2;
var imgA = [];
var src = [];
src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg");
src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg");
src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg");
for(var i=0; i < tileWCount; i++){
var img = new Image();
img.onload = (function(value){
return function() {
ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
}
})(i);
img.src = src[i];
}
}
draw();
#canvas{
border: 1px solid black;
}
<canvas id="canvas" width="320" height="240"></canvas>
您将需要使用:
ctx.drawImage(this, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
而不是
ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
您的 img
变量遇到与您使用闭包为 i
修复的相同 "last value" 问题。您可以用相同的方式在闭包中捕获 img
的值,但只使用 this
.
更容易
工作现场演示:
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var tileWidth = 25;
var tileWCount = 3;
var multi = 2;
var imgA = [];
var src = [];
src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg");
src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg");
src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg");
for(var i=0; i < tileWCount; i++){
var img = new Image();
img.onload = (function(value){
return function() {
ctx.drawImage(this, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
}
})(i);
img.src = src[i];
}
}
draw();
#canvas{
border: 1px solid black;
}
<canvas id="canvas" width="320" height="240"></canvas>
JSFiddle 版本:http://jsfiddle.net/jv0ko966/2/
在 for 循环中使用 src.length 而不是采用静态定义的变量 (tileCount)。
我试过了,它的工作。
我只是想并排加载 3 张不同的图像,但是当我 运行 以下代码时,它只绘制我多次推入 src[]
的最后一张图像。
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var tileWidth = 25;
var tileWCount = 3;
var multi = 2;
var src = [];
src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg");
src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg");
src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg");
for(var i=0; i < tileWCount; i++){
var img = new Image();
img.onload = (function(value){
return function() {
ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
}
})(i);
img.src = src[i];
}
}
我从 this Stack Overflow post 中提取了大部分代码。我可以将 src
设置为单个图像,但是当我尝试使用我的迭代器时,它开始失败。我确实注意到那里的答案是将 ctx.drawImage
与 src[value]
一起使用,但我无法用它绘制任何东西。
我完全不知道为什么会发生这种情况。
为了方便起见,我建立了一个 jsfiddle 项目:http://jsfiddle.net/fierstarter/jv0ko966/
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var tileWidth = 25;
var tileWCount = 3;
var multi = 2;
var imgA = [];
var src = [];
src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg");
src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg");
src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg");
for(var i=0; i < tileWCount; i++){
var img = new Image();
img.onload = (function(value){
return function() {
ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
}
})(i);
img.src = src[i];
}
}
draw();
#canvas{
border: 1px solid black;
}
<canvas id="canvas" width="320" height="240"></canvas>
您将需要使用:
ctx.drawImage(this, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
而不是
ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
您的 img
变量遇到与您使用闭包为 i
修复的相同 "last value" 问题。您可以用相同的方式在闭包中捕获 img
的值,但只使用 this
.
工作现场演示:
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var tileWidth = 25;
var tileWCount = 3;
var multi = 2;
var imgA = [];
var src = [];
src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg");
src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg");
src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg");
for(var i=0; i < tileWCount; i++){
var img = new Image();
img.onload = (function(value){
return function() {
ctx.drawImage(this, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
}
})(i);
img.src = src[i];
}
}
draw();
#canvas{
border: 1px solid black;
}
<canvas id="canvas" width="320" height="240"></canvas>
JSFiddle 版本:http://jsfiddle.net/jv0ko966/2/
在 for 循环中使用 src.length 而不是采用静态定义的变量 (tileCount)。 我试过了,它的工作。