进来看看，有没有什么js库或者方法能在页面里面画斜线或者旋转

[joyhen]

如题：我在兼容性上面卡住了，锯齿严重。
我就是想画出斜线（当然包括直线、竖线）。

另一条思路，我自己用div填充，然后旋转div角度，可是遇到2个问题：
1.起始位置和结束位置我能得到，可是中间怎么衔接。
2.旋转做不到兼容
求支招

[joyhen]

在线等

[JUST_DO_IT----adiaos]

canvas可以用吗？ 如果可以就好办

[joyhen]

引用 3 楼 jadier 的回复:

canvas可以用吗？ 如果可以就好办

ie下面不兼容的

[JUST_DO_IT----adiaos]

是的。不兼容IE9以前的版本

[JUST_DO_IT----adiaos]

那你只能写两种或更多种方案来适应不同的浏览器了，要么你就显示给客户：您的浏览器不兼容此图表

[joyhen]

引用 6 楼 jadier 的回复:

那你只能写两种或更多种方案来适应不同的浏览器了，要么你就显示给客户：您的浏览器不兼容此图表

有没有一些代码参考呢

[JUST_DO_IT----adiaos]

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();
                
            }

[joyhen]

引用 8 楼 jadier 的回复:

canvas有一些，这个应该可能支持到除了IE6，7，8以外的大部分浏览器。 我写的一段代码，大部分是画矩形的操作，你要画线应该也很容易，你看看能不能参考 JavaScript code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748……

非常感谢

[joyhen]

没人吗