[游戏开发]svg 绘制

svg 和canvas的区别

svg：矢量图，使用html元素绘制，适合大面积贴图

canvas：位图/像素图，使用js操作,适合小面积绘图、动画效果、h5中的小游戏

利用svg 绘制一个国际象棋棋盘

<svg> </svg>

svg{
   	width: 800px;
    height: 800px;
    border: 1px solid;
}

        var svg = document.getElementsByTagName("svg")[0];
        
        for(var i=0; i<8; i++){
            for(var j=0; j<8; j++){
            	// 创建rect 
            	// createElementNS 创建一个具有指定的命名空间URI和限定名称的元素。
            	// createElement 创建一个元素而不指定命名空间URI
                var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
                var grid = svg.appendChild(rect);
                // 添加属性
                grid.setAttribute("width","100px");
                grid.setAttribute("height","100px");
                grid.setAttribute("x",j*100);
                grid.setAttribute("y",i*100);
                if(i%2){
                    if(j%2){
                        grid.setAttribute("fill","black")
                    }else{
                        grid.setAttribute("fill","white")
                    }
                }else{
                    if(j%2){
                        grid.setAttribute("fill","white")
                    }else{
                        grid.setAttribute("fill","black")
                    }
                }       
            }   
        }

有效的命名空间URI：
HTML - 参阅 http://www.w3.org/1999/xhtml
SVG - 参阅 http://www.w3.org/2000/svg
XBL - 参阅 http://www.mozilla.org/xbl
XUL - 参阅 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul