读书人

进去看看有没有什么js库或者方法能在

发布时间: 2013-04-21 21:18:07 作者: rapoo

进来看看,有没有什么js库或者方法能在页面里面画斜线或者旋转
如题:我在兼容性上面卡住了,锯齿严重进去看看,有没有什么js库或者方法能在页面里面画斜线或者旋转
我就是想画出斜线(当然包括直线、竖线)。

另一条思路,我自己用div填充,然后旋转div角度,可是遇到2个问题:
1.起始位置和结束位置我能得到,可是中间怎么衔接。
2.旋转做不到兼容
求支招 js画线
[解决办法]
canvas有一些,这个应该可能支持到除了IE6,7,8以外的大部分浏览器。

我写的一段代码,大部分是画矩形的操作,你要画线应该也很容易,你看看能不能参考


function main(){
this.canvas=document.getElementById("gameCanvas");
this.context=null;
if(this.canvas.getContext){
this.context=canvas.getContext("2d");
}
if(!this.context){
alert("Your browser does not support canvas.");
return;
}

this.container=document.getElementById("mainDiv");

this.cardCanvasDic=[];

this.cardCellWidth=120;
this.cardCellHeight=150;
this.cardCellSpan=20;

this.getCardPosition=function(row,column){
var _x=cardCellSpan+(column-1)*(cardCellWidth+cardCellSpan);
var _y=cardCellSpan+(row-1)*(cardCellHeight+cardCellSpan);
return {x:_x, y:_y};
};

this.DrawAbilities=function(ctx,abilities){
for(var i in abilities){
var ability=abilities[i];


if(ability){
var x,y;
if(ability.Direction=="up"){
x=40;
y=60;
}
else if(ability.Direction=="right"){
x=10;
y=65;
}
else if(ability.Direction=="down"){
x=40;
y=130;
}
else if(ability.Direction=="left"){
x=110;
y=65;
}
ctx.font="10px Arial";
if(ability.Type=="melee"){
ctx.fillText("melee("+ ability.Point +")",x,y);


}
else if(ability.Type=="shield"){
ctx.fillText("shield("+ ability.Point +")",x,y);
}

}
}
};

var gameRender=new GameRender();
gameRender.DrawCardTableMethod=function(cardTable){
context.lineWidth=2;
context.strokeStyle="#333";
for(var row=1;row<=cardTable.MaxRow;row++){
for(var column=1;column<=cardTable.MaxColumn;column++){
var position=getCardPosition(row,column);
context.strokeRect(position.x,position.y,cardCellWidth,cardCellHeight);
}
}

var cardTableWidth=cardCellSpan+cardTable.MaxRow*(cardCellWidth+cardCellSpan);
var cardTableHeight=cardCellSpan+cardTable.MaxColumn*(cardCellHeight+cardCellSpan);
context.lineWidth=3;
context.strokeStyle="black";
context.strokeRect(0,0,cardTableWidth,cardTableHeight);


};

gameRender.DrawPutCardDownMethod=function(row,column,card){
var cardCanvas=document.createElement("canvas");
cardCanvas.setAttribute("width",cardCellWidth);
cardCanvas.setAttribute("height",cardCellHeight);
cardCanvas.setAttribute("id","cavCard"+card.CardId);
cardCanvas.style.position="absolute";


var position=getCardPosition(row,column);

cardCanvas.style.left=position.x+"px";
cardCanvas.style.top=position.y+"px";
cardCanvas.style.zIndex=1;

var cardCanvasCtx=cardCanvas.getContext("2d");

if(card.PlayerNo==0){
cardCanvasCtx.fillStyle = "rgba(0, 0, 200, 0.5)";
}
else{
cardCanvasCtx.fillStyle = "rgba(200, 0, 0, 0.5)";
}
cardCanvasCtx.fillRect(0,0,cardCellWidth,cardCellHeight);
cardCanvasCtx.fillStyle="rgba(255, 255, 55, 1)";
cardCanvasCtx.font="15px Arial";


cardCanvasCtx.fillText(card.CardName,10,15);
container.appendChild(cardCanvas);

DrawAbilities(cardCanvasCtx,card.Abilities);

cardCanvasDic[card.CardId]=cardCanvas;
};

gameRender.DrawAbilityActionMethod=function(card,cardAbility,target,targetAbility,affection){


var cardAbilityInfo=cardAbility.Type;

cardAbilityInfo=cardAbilityInfo+"("+ cardAbility.Point +")";
if(cardAbility.Type=="melee"){
cardAbilityInfo=cardAbilityInfo+" attack";
}
var targetInfo="";
if(targetAbility.Type=="shield"){
targetInfo=target.CardName +" defend with shield("+ targetAbility.Point +")";
if(affection.Type=="kill"){
targetInfo=targetInfo+" Defend failed!";
}
else if(affection.Type=="none"){
targetInfo=targetInfo+" Defend successfully!";
}


}


var result="nothing happended!";
if(affection.Type=="kill"){
result="attack was successful!";
}
else if(affection.Type=="none"){
result="action failed!";
}


alert("Card \""+ card.CardName + "\" use ability "+ cardAbilityInfo +" to \""+ target.CardName +"\"");
alert("Target card \"" +"\""+targetInfo);
alert("Card \""+ card.CardName + "\"'s "+result);
};

GameDirector.Init(gameRender);
GameDirector.StartGame();

}

读书人网 >asp.net

热点推荐