Image 在画布中绘制图像无法正常工作
我需要canvas方面的帮助,因为有一个问题我花了大约一天的时间试图解决。下面是我正在测试的部分代码Image 在画布中绘制图像无法正常工作,image,canvas,Image,Canvas,我需要canvas方面的帮助,因为有一个问题我花了大约一天的时间试图解决。下面是我正在测试的部分代码 var imgpos = 0; function drawshape(context, shape, fill, bb) { context.beginPath(); context.save(); context.translate( 0, 130); context.scale(1, 0.65); context.shadowOffsetX = 0; context.shadowOffse
var imgpos = 0;
function drawshape(context, shape, fill, bb) {
context.beginPath();
context.save();
context.translate( 0, 130);
context.scale(1, 0.65);
context.shadowOffsetX = 0;
context.shadowOffsetY = 10;
context.shadowBlur = 9;
context.shadowColor = "black";
context.arc(shape.x, shape.y, shape.r, shape.sa, shape.ea, shape.cc);
context.lineWidth = shape.lw;
// line color
context.strokeStyle = fill;
context.stroke();
context.restore();
// not working :( ---------------
context.save();
for(var lg = 0; lg < shape.ic; lg++) { //
var imagesel = new Image();
imagesel.src = '/images/themes/default/capsules/'+imgpos+'.png';
imagesel.onload = function(){
if(imgpos==0){xx=70;yy=320;}
if(imgpos==1){xx=120;yy=260;}
if(imgpos==2){xx=140;yy=320;}
if(imgpos==3){xx=160;yy=320;}
if(imgpos==4){xx=180;yy=320;}
if(imgpos==5){xx=200;yy=320;}
if(imgpos==6){xx=220;yy=320;}
if(imgpos==7){xx=240;yy=320;}
if(imgpos==8){xx=260;yy=320;}
context.drawImage(imagesel, xx, yy);
}
if(imgpos != 8){imgpos++;} else {imgpos=0;}
}
context.restore();
// till here :( ---------------
if(shape.link != 'Limited'){
context.save();
context.scale(1, 0.65);
context.translate(500,660);
context.font = "bold 15pt Arial";
context.fillStyle = "WHITE";
if(bb <= 2){
context.textAlign="right";
context.rotate((((shape.sa+shape.ea)-0.1)/2)-Math.PI);
context.fillText(shape.link, -170, 0);
}
if(bb > 2){
context.textAlign="left";
context.rotate((((shape.sa+shape.ea)+0.1)/2)-2*Math.PI);
context.fillText(shape.link, +170, 0);
}
context.restore();
}else{
context.save();
context.scale(1, 0.65);
context.translate( 0, 130);
context.textAlign="center";
context.font = "bold 15pt Arial";
context.fillStyle = "WHITE";
context.fillText(shape.link, shape.x, shape.y-10);
context.restore();
}
}
var-imgpos=0;
函数drawshape(上下文、形状、填充、bb){
context.beginPath();
context.save();
上下文翻译(0130);
背景量表(1,0.65);
context.shadowOffsetX=0;
context.shadowOffsetY=10;
context.shadowBlur=9;
context.shadowColor=“黑色”;
弧(shape.x,shape.y,shape.r,shape.sa,shape.ea,shape.cc);
context.lineWidth=shape.lw;
//线条颜色
context.strokeStyle=填充;
stroke();
restore();
//不工作:(---------------
context.save();
对于(var lg=0;lg
所以这段代码(不工作的部分除外)以半圆形的方式绘制圆弧,但每个圆弧都是分开和着色的等等。我的问题是我想把图片放在所有圆弧中,但图片的数量不一样(这就是cycle的原因,看起来你被臭名昭著的循环变量问题愚弄了。JavaScript变量存在于每个函数中,而不是每个块中。因此,你的
imagesel
/imgpos
变量实际上只存在一次,这意味着你在一个位置上只有一个图像。每次循环迭代都会覆盖该变量
您应该在函数中封装适当的循环代码,以实际创建单独的变量。此外,您还没有使用var
在任何地方声明xx
/yy
for(var lg = 0; lg < shape.ic; lg++) {
(function(imgpos) {
var imagesel = new Image();
imagesel.src = '/images/themes/default/capsules/'+imgpos+'.png';
imagesel.onload = function(){
if(imgpos==0){xx=70;yy=320;}
if(imgpos==1){xx=120;yy=260;}
if(imgpos==2){xx=140;yy=320;}
if(imgpos==3){xx=160;yy=320;}
if(imgpos==4){xx=180;yy=320;}
if(imgpos==5){xx=200;yy=320;}
if(imgpos==6){xx=220;yy=320;}
if(imgpos==7){xx=240;yy=320;}
if(imgpos==8){xx=260;yy=320;}
context.drawImage(imagesel, xx, yy);
}
})(imgpos);
if(imgpos != 8){imgpos++;} else {imgpos=0;}
}
for(var lg=0;lg