进来看看，有没有什么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();
}
